CSS选择器分类总结

一.选择器语法及其意义（pattern and meaning）

Pattern	Meaning	CSS level
E	an element of type E 标记选择器，匹配所有标签名为E的元素	1
E:link E:visited	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 E:hover E:focus	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 E:disabled	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，必须保持一致）

三.选择器的分类

1. type selector——类型选择器（标记选择器）
2. universal selector——通配选择器
3. attribute selector——属性选择器
4. class selector——类选择器
5. ID selector——ID选择器
6. 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.重复出现相同的简单选择器都算有效计数

参考资料：

官方文档：http://www.w3.org/TR/css3-selectors/