CSS 选择器及其优先级

CSS 的选择器有很多类型，我们将常用的这些列表如下：

一、CSS 选择器的类别

1. 基本选择器

基本选择器	解释	备注
*	通用选择器，匹配所有元素	CSS2
E	元素选择器，匹配类型为 E 的所有元素	CSS1
.foo	类选择器，匹配 class 属性包含 "foo" 的所有元素	CSS1
#bar	ID 选择器，匹配 id 属性等于 "bar" 的惟一元素	CSS1

2. 组合选择器

组合选择器	解释	备注
E, F	多元素选择器，匹配 E 和 F	CSS1
E F	后代选择器，匹配 E 的后代 F	CSS1
E > F	子元素选择器，匹配 E 的子元素 F	CSS2
E + F	相邻选择器，匹配紧随 E 元素的同级元素 F	CSS2

3. 属性选择器

属性选择器	解释	备注
E[att]	匹配拥有 attr 属性的所有 E 元素	CSS2
E[att=val]	匹配 attr 属性等于 val 的所有 E 元素	CSS2
E[att~=val]	匹配 attr 属性包含 val 值的所有 E 元素，各个值用空格隔开	CSS2
E[att|=val]	匹配 attr 属性包含 val 值的所有 E 元素，各个值用连字号隔开	CSS2

4. 伪类选择器

伪类选择器	解释	备注
E:hover	匹配鼠标悬停其上的所有 E 元素	CSS2
E:focus	匹配获得输入焦点的所有 E 元素	CSS2
E:active	匹配处于活动状态的所有 E 元素	CSS1
E:link	匹配未被访问的所有 E 链接	CSS1
E:visited	匹配已被访问的所有 E 链接	CSS1
E:first-child	匹配 E 元素的第一个子元素	CSS2

5. 伪元素选择器

伪元素选择器	解释	备注
E:before	在 E 元素之前添加内容	CSS2
E:after	在 E 元素之后添加内容	CSS2
E:first-line	匹配 E 元素的第一行	CSS1
E:first-letter	匹配 E 元素的首个字符	CSS1

二、CSS 优先级的计算

CSS 样式的优先级由四个级别组成，它们分别是：

1. 是否为标签中定义的样式
2. ID 选择符的个数
3. 类选择符，伪类选择符和属性选择符的个数
4. 元素选择符和伪元素选择符的个数

在计算 CSS 样式的优先级时，根据这些级别和特殊情形依次比较：（A）!important 样式高于其它样式；（B）标签内定义的样式优先于 CSS 文件中定义的样式；（C）如果前面的优先级一样，则依次比较后面三个级别的数目，谁大谁优先；（D）继承得到的样式比非继承的低；（E）如果优先级都一样，则使用最后出现的样式。

参考资料：
[1] W3C CSS2 Selectors
[2] W3C CSS3 Selectors
[3] Selectors - Web developer guide | MDN
[4] CSS selectors - quirksmode.org
[5] CSS Properties & Selectors | CSS Creator
[6] Understanding CSS Selectors (Internet Explorer) - MSDN
[7] CSS Compatibility in Internet Explorer (Internet Explorer) - MSDN
[8] CSS选择器笔记 - 阮一峰的网络日志
[9] CSS选择器的浏览器支持 | 前端观察
[A] W3C CSS 2.1 - Calculating a selector's specificity
[B] Specifics on CSS Specificity | CSS-Tricks
[C] CSS优先级 - Rain Man - 博客园