CSS 1 中定义的选择器
| 选择器 |
| E |
| E#myid |
| E.waring |
| E F |
| E:link |
| E:visited |
| E:active |
| E:hover |
| E:focus |
| E::first-line |
| E::first-letter |
后面三个没有看过，就字面上来理解，最后两个是双冒号，有点意思。书中说：最后三个被CSS 2重新定义了。不知道现在还能不能用。实验了一下，还可以用的。
CSS 2 定义的选择器
| 选择器 |
| * |
| E[foo] |
| E[foo=""] |
| E[foo~="bar"] |
| E[foo|="en"] |
| E:first-child |
| E:lang(fr) |
| E::before |
| E::after |
| E>F |
| E+F |
1） * 如果直接写在head里，并且设置了display:block，Head内所有标签内的内容输出来。
在IETester中,IE9+都会出现这个问题。
2）[foo~="some"],针对foo属性匹配，根据"a b c"字符串的每个单词进行取舍。
3) [foo|="some"],针对foo树形匹配，根据"a-b-c"字符串的第一个单词进行取舍。
4）:lange(fr)，相当于[lang="fr"]。
5) ::before,::after,描述元素前后位置的内容（设置content:"sth."属性）及其样式。若前面没有限定，则针对所有元素进行渲染，其结果和“*”相同，IE+9和Firefox 21.0讲head和html也进行渲染。
CSS 3 新增的选择器
| 属性选择器 |
| E[foo^="bar"] |
| E[foo$="bar"] |
| E[foo*="bar"] |
这几个属性选择器，将整个属性值作为一个字符串对待，进行正则匹配。
| 结构伪类选择器 |
| E:root |
| E:nth-child(n) |
| E:nth-last-child(n) |
| E:nth-of-type(n) |
| E:nth-last-of-type(n) |
| E:last-child |
| E:first-of-type |
| E:last-of-type |
| E:only-child |
| E:only-of-type |
| E:empty |
1）这些“结构伪选择器”根据元素处在DOM结构中位置，来判断元素是否匹配：
# 是否为根元素(root? )
# 是否没有任何节点(leaf? )
# 作为（特定类型的）子元素，在父容器中出现的次序（正序、倒序）(index of position in parent? )
# 作为（特定类型的）子元素，是否出现在特殊的位置上（first,last）(particular postision? )
# 作为（特定类型的）子元素，是否还有兄弟元素(be alone? )
2）3n+2 的解释：2（凡是偶数），都表示匹配第偶数个元素。3n（系数表示步长），是在偶数基础上的步长，也就是6.
3）不论CSS 2还是CCS 3 添加的属性选择器，对属性名称不区分大小写，对属性值的区分大小写的。
| UI元素状态伪类选择器 |
| E:enabled |
| E:disabled |
| E:checked |
1） "UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等...注意：在网页中，UI元素一般指包含在form元素内的表单元素。”
2）在Firefox和Chrome 里试了一下，在form 外的表单元素也匹配的。
| 其他选择器 |
| E~F |
| E:not(s) |
| E:target |
1）E~F，匹配 E 后面的 F 元素。其中，E 和 F 都是选择器；E 和 F 在同一级结构中，尝试了一下，同一级结构指的就是兄弟关系，不同父节点的同级结构不匹配；说“后面”，不是紧靠着的后面，而是所有后面。
2）E:target,原来还可以这么搞，一直以为url 中追加#只能指锚点呢，汗！试了一下，如果页面中，定义了锚点，而锚点名与其他元素的 id 冲突的时候，优先选择 id .