一.选择器语法及其意义（pattern and meaning）
|
Pattern |
Meaning |
CSS level |
|
E |
an element of type E 标记选择器，匹配所有标签名为E的元素 |
1 |
|
E:link |
an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) 伪类，匹配未访问链接与已访问链接 |
1 |
|
E::first-line |
the first formatted line of an E element 首行伪元素，匹配元素E的第一行内容 需要注意的是：第一行的长度取决于容器的大小和字体大小等等，并不是匹配第一个句号；除此之外，first-line伪元素会受到before/after伪元素的影响 P.S.IE6不支持（单冒号也不支持） |
1 |
|
E::first-letter |
the first formatted letter of an E element 首字母伪元素，匹配元素E的第一个字母 需要注意的是：同上 P.S.IE6不支持（单冒号也不支持） |
1 |
|
E.warning |
an E element whose class is "warning" (the document language specifies how class is determined). 类选择器，匹配class属性是warning的E元素 P.S.类选择器.attr等价于*.attr，所以列表中没有.attr |
1 |
|
E#myid |
an E element with ID equal to "myid". ID选择器，匹配id属性是myid的E元素 P.S.类选择器#myid等价于*#myid，所以列表中没有#myid |
1 |
|
E F |
an F element descendant of an E element 后代选择器，匹配被E元素包裹着的F元素 |
1 |
|
E:active |
an E element during certain user actions 伪类，分别匹配处于激活状态，鼠标悬停状态，持有焦点状态的E元素 P.S.注意LVHA爱恨原则，a标签的激活状态就是鼠标按下不抬起 |
1 and 2 |
|
* |
any element 通配选择器，匹配所有元素 |
2 |
|
E[foo] |
an E element with a "foo" attribute 属性选择器，匹配声明了属性名为foo的E元素 |
2 |
|
E[foo="bar"] |
an E element whose "foo" attribute value is exactly equal to "bar" 属性选择器，匹配声明了属性名为foo且值为bar的E元素 |
2 |
|
E[foo~="bar"] |
an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" 属性选择器，匹配声明了属性名为foo且值列表中包含bar的E元素 P.S.例如foo=”value1 bar value2” |
2 |
|
E[foo|="en"] |
an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" 属性选择器，匹配声明了属性名为foo且值为以独立en开头的E元素（连字符隔开的） P.S.需要注意的是如果存在E1foo=”en”，E2foo=”en-x”，E3foo=”en_xx”，E4foo=”enxxx”，那么匹配结果是E1和E2，与^=选择器不同 |
2 |
|
E:first-child |
an E element, first child of its parent 结构化伪类，匹配E的父元素的第一个孩子 P.S.先数，再筛类型 |
2 |
|
E:lang(fr) |
an element of type E in language "fr" (the document language specifies how language is determined) 伪类，表示语言是法语（body的lang属性值为fr）匹配body内的所有元素（继承） P.S.用于为不同的语言环境指定样式，比如某些国家的引号并不是” |
2 |
|
E::before |
generated content before an E element 伪元素，在E标签前面添加内容（只能添加文本，不能添加标记） P.S.IE6不支持 |
2 |
|
E::after |
generated content after an E element 伪元素，在E标签后面添加内容（只能添加文本，不能添加标记） P.S.IE6不支持 |
2 |
|
E > F |
an F element child of an E element 子选择器，匹配作为E的直接孩子的F元素（不包括孙子） P.S.IE6不支持 |
2 |
|
E + F |
an F element immediately preceded by an E element 相邻兄弟选择器，匹配紧跟在E后面的F元素 |
2 |
|
E[foo^="bar"] |
an E element whose "foo" attribute value begins exactly with the string "bar" 子串匹配属性选择器，匹配声明了属性名为foo且值以bar开头的E元素 |
3 |
|
E[foo$="bar"] |
an E element whose "foo" attribute value ends exactly with the string "bar" 子串匹配属性选择器，匹配声明了属性名为foo且值以bar结尾的E元素 |
3 |
|
E[foo*="bar"] |
an E element whose "foo" attribute value contains the substring "bar" 子串匹配属性选择器，匹配声明了属性名为foo且值包含bar的E元素 |
3 |
|
E:root |
an E element, root of the document 结构化伪类，匹配根元素（一般是html标签） P.S.IE6不支持 |
3 |
|
E:nth-child(n) |
an E element, the n-th child of its parent 结构化伪类，匹配E的父元素的第n个孩子且要求该孩子类型为E，如果不是则匹配失败（n的值是从1开始，2n和2n+1分别表示第偶数个和第奇数个，等价于even和odd，n表示所有孩子，-n + 2表示前两个孩子） P.S.IE6不支持，先数，再筛类型 |
3 |
|
E:nth-last-child(n) |
an E element, the n-th child of its parent, counting from the last one 结构化伪类，匹配E的父元素的倒数第n个孩子且要求该孩子类型为E，如果不是则匹配失败，n的取值同上 P.S.IE6不支持，先数，再筛类型 |
3 |
|
E:nth-of-type(n) |
an E element, the n-th sibling of its type 结构化伪类，匹配E的父元素的第n个E类型的孩子 P.S.IE6不支持，先筛类型，再数 |
3 |
|
E:nth-last-of-type(n) |
an E element, the n-th sibling of its type, counting from the last one 结构化伪类，匹配E的父元素的倒数第n个E类型的孩子（同上） P.S.IE6不支持，先筛类型，再数 |
3 |
|
E:last-child |
an E element, last child of its parent 结构化伪类，匹配E的父元素的最后一个孩子 P.S.IE6不支持，先数，再筛类型 |
3 |
|
E:first-of-type |
an E element, first sibling of its type 结构化伪类，匹配E的父元素的第一个E类型的孩子 P.S.IE6不支持，先筛类型，再数 |
3 |
|
E:last-of-type |
an E element, last sibling of its type 结构化伪类，匹配E的父元素的最后一个E类型的孩子 P.S.IE6不支持，先筛类型，再数 |
3 |
|
E:only-child |
an E element, only child of its parent 结构化伪类，匹配E的父元素的惟一一个孩子且要求该孩子类型为E P.S.IE6不支持，先数（确定“独生子女”），再筛类型 |
3 |
|
E:only-of-type |
an E element, only sibling of its type 结构化伪类，匹配E的父元素的惟一一个E类型的孩子 P.S.IE6不支持，先筛类型，再数（确定“独生子女”） |
3 |
|
E:empty |
an E element that has no children (including text nodes) 结构化伪类，匹配E类型的空元素（没有任何孩子，包括文本节点） P.S.IE6不支持 |
3 |
|
E:target |
an E element being the target of the referring URI 伪类，表示页内跳转目标位置 P.S.IE6不支持 |
3 |
|
E:enabled |
a user interface element E which is enabled or disabled UI元素状态伪类，匹配处于有效状态和失效状态的E元素 P.S.IE6不支持 |
3 |
|
E:checked |
a user interface element E which is checked (for instance a radio-button or checkbox) 伪类，匹配处于选中状态的radio和checkbox（可自定义的样式很少） P.S.IE6不支持 |
3 |
|
E:not(s) |
an E element that does not match simple selector s 取反伪类，匹配对s选择器匹配结果的补集中的E元素，例如span:not(:empty)匹配所有非空的span P.S.IE6不支持，不能嵌套使用，而且参数s不能指定类型，默认与E的类型相同，也就是说span:not(span:empty)是不合法的 |
3 |
|
E ~ F |
an F element preceded by an E element 一般相邻选择器，匹配跟在E后面的所有F元素 |
3 |
二.选择器语法的大小写敏感性（case-sensitivity）
选择器语法不是大小写敏感的（case-insensitive），a:hover等价于a:HOVER，但标签名和属性名以及属性值是大小写敏感的（取决于HTML，必须保持一致）
三.选择器的分类
- type selector——类型选择器（标记选择器）
- universal selector——通配选择器
- attribute selector——属性选择器
- class selector——类选择器
- ID selector——ID选择器
- pseudo-class——伪类
四.pseudo-class伪类与pseudo-element伪元素的区别
- 形式上，伪类有一个冒号，而伪元素有两个冒号
- 意义上，伪类相当于给现有元素添加了class属性值，而伪元素相当于创建了一个新的元素（p:first-child匹配p的第一个子元素，相当给第一个子元素设置了匿名class；p::first-line匹配段落第一行内容，相当于创建了一个span）
特别的，伪类要遵循LVHA爱恨原则；before, after不是伪类而是伪元素（最容易混淆，原因是浏览器兼容问题——某些浏览器不支持双冒号）
五.选择器特殊性（specificity）的计算
特殊性高的样式会覆盖特殊性低的样式，比如：#cnblogs_post_body > p{/*style1*/}和p{/*style2*/}共存时，表现出来的是特殊性更高的style1，特殊性的计算规则如下：
a = ID选择器的个数
b = （类选择器 + 属性选择器 + 伪类）的个数
c = （标记选择器 + 伪元素）的个数
P.S.1.忽略通配选择器
P.S.2.取反选择器不算数（取反选择器本身不计入伪类的个数，但左右的都算），例如#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
P.S.3.重复出现相同的简单选择器都算有效计数
参考资料：