选择器优先级计算
选择器优先级计算
浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
选择器优先级决定了哪一条样式规则会被浏览器应用在元素上。
优先级是如何计算的？
优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
选择器的优先级计算如下：
- 计算选择器中ID选择器的数量（= a）
- 计算选择器中的类选择器，属性选择器和伪类的数量（= b）
- 计算选择器中标签选择器和伪元素的数量（= c）
- 忽略通用选择器
| 选择器类型 | 选择器 |
|---|---|
| a | ID选择器 |
| b | 类选择器、属性选择器、伪类选择器 |
| c | 标签选择器、伪元素选择器 |
| - | 通用选择器 |
将三个数字abc（在基数较大的数字系统中）连接起来可得出优先级。
* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
选择器类型
| 选择器名称 | 选择器类型 | 选择器 | 版本 | 描述 |
|---|---|---|---|---|
| 通用选择器 | - | * | 2 | 所有元素对象。 |
| 父子选择器 | - | E> F | 2 | 选择所有作为E元素的子元素F。 |
| 兄弟选择器 | - | E + F | 2 | 选择紧贴在E元素之后F元素。 |
| 后继选择器 | - | E〜F | 3 | 选择E元素所有兄弟元素F。 |
| 后代选择器 | - | E F | 1 | 选择所有被E元素包含的F元素。 |
| ID选择器 | a | #myid | 1 | 以唯一标识符id属性等于myid的E对象作为选择符。 |
| class选择器 | b | .myclass | 1 | 以class属性包含myclass的E对象作为选择符。 |
| 标签选择器 | c | E | 1 | 以文档语言标签名称作为选择符。 |
| 属性选择器 | b | E[att] | 2 | 选择具有att属性的E元素。 |
| 属性选择器 | b | E[att="val"] | 2 | 选择具有att属性且属性值等于val的E元素。 |
| 属性选择器 | b | E[att~="val"] | 2 | 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。 |
| 属性选择器 | b | E[att^="val"] | 3 | 选择具有att属性且属性值为以val开头的字符串的E元素。 |
| 属性选择器 | b | E[att$="val"] | 3 | 选择具有att属性且属性值为以val结尾的字符串的E元素。 |
| 属性选择器 | b | E[att*="val"] | 3 | 选择具有att属性且属性值为包含val的字符串的E元素。 |
| 属性选择器 | b | E[attＩ="val"] |
2 | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。 |
| 伪类选择器 | c | E:not(s) | 3 | 匹配不含有s选择符的元素E。 |
| 伪类选择器 | b | E:link | 1 | 设置超链接a在未被访问前的样式。 |
| 伪类选择器 | b | E:visited | 1 | 设置超链接a在其链接地址已被访问过时的样式。 |
| 伪类选择器 | b | E:hover | 1/2 | 设置元素在其鼠标悬停时的样式。 |
| 伪类选择器 | b | E:active | 1/2 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 |
| 伪类选择器 | b | E:focus | 1/2 | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。 |
| 伪类选择器 | b | E:lang(fr) | 2 | 匹配使用特殊语言的E元素。 |
| 伪类选择器 | b | E:root | 3 | 匹配E元素在文档的根元素。 |
| 伪类选择器 | b | E:first-child | 2 | 匹配父元素的第一个子元素E。 |
| 伪类选择器 | b | E:last-child | 3 | 匹配父元素的最后一个子元素E。 |
| 伪类选择器 | b | E:only-child | 3 | 匹配父元素仅有的一个子元素E。 |
| 伪类选择器 | b | E:nth-child(n) | 3 | 匹配父元素的第n个子元素E。 |
| 伪类选择器 | b | E:nth-last-child(n) | 3 | 匹配父元素的倒数第n个子元素E。 |
| 伪类选择器 | b | E:first-of-type | 3 | 匹配父元素下第一个类型为E的子元素。 |
| 伪类选择器 | b | E:last-of-type | 3 | 匹配父元素下的所有E子元素中的倒数第一个。 |
| 伪类选择器 | b | E:only-of-type | 3 | 匹配父元素的所有子元素中唯一的那个子元素E。 |
| 伪类选择器 | b | E:nth-of-type(n) | 3 | 匹配父元素的第n个子元素E。 |
| 伪类选择器 | b | E:nth-last-of-type(n) | 3 | 匹配父元素的倒数第n个子元素E。 |
| 伪类选择器 | b | E:empty | 3 | 匹配没有任何子元素（包括text节点）的元素E。 |
| 伪类选择器 | b | E:checked | 3 | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
| 伪类选择器 | b | E:enabled | 3 | 匹配用户界面上处于可用状态的元素E。 |
| 伪类选择器 | b | E:disabled | 3 | 匹配用户界面上处于禁用状态的元素E。 |
| 伪类选择器 | b | E:target | 3 | 匹配相关URL指向的E元素。 |
| 伪元素选择器 | c | E:first-letter/E::first-letter | 1/3 | 设置对象内的第一个字符的样式。 |
| 伪元素选择器 | c | E:first-line/E::first-line | 1/3 | 设置对象内的第一行的样式。 |
| 伪元素选择器 | c | E:before/E::before | 2/3 | 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| 伪元素选择器 | c | E:after/E::after | 2/3 | 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| 伪元素选择器 | c | E::placeholder | 3 | 设置对象文字占位符的样式。 |
| 伪元素选择器 | c | E::selection | 3 | 设置对象被选择时的颜色。 |
CSS选择器优先级计算练习
* {} a=0 b=0 c=0 -> specificity = 0
li{} a=0 b=0 c=1 -> specificity = 1
li:first-line{} a=0 b=0 c=2 -> specificity = 2
ul li {} a=0 b=0 c=2 -> specificity = 2
ul ol+li{} a=0 b=0 c=3 -> specificity = 3
h1+ *[rel=up] {} a=0 b=1 c=1 -> specificity = 11
ul ol li.red{} a=0 b=1 c=3 -> specificity = 13
li.red.level{} a=0 b=2 c=1 -> specificity = 21
p {} a=0 b=0 c=1 -> specificity = 1
div p {} a=0 b=0 c=2 -> specificity = 2
.sith {} a=0 b=1 c=0 -> specificity = 10
div p.sith{} a=0 b=1 c=2 -> specificity = 12
#sith{} a=1 b=0 c=0 -> specificity = 100
body #darkside .sith p {} a=1 b=1 c=2 -> specificity = 112
注意：行内样式覆盖CSS定义样式，因此可以认为行内样式优先级高于任何一种选择器或选择器组合。 注意：!important是提高指定CSS样式规则的应用优先级，覆盖行内样式。
CSS样式规则优先级
【高】 CSS样式规则优先级
──────────────────────────────────────────────────────────────────────
┌────────────┐
┌─┤ !important │
│ └────────────┘
│ ┌────────────┐
├─┤ 行内样式 │
│ └────────────┘
│ ┌────────────┐
├─┤ ID选择器 │
│ └────────────┘
│ ┌──────────────────────────────────────────────────────────┐
├─┤ [类选择器、属性选择器、伪类选择器]、交叉选择器、后代选择器 │
│ └──────────────────────────────────────────────────────────┘
│ ┌─────────────────────────┐
├─┤ 标签选择器、伪元素选择器 │
│ └─────────────────────────┘
│ ┌────────────┐
├─┤ 通用选择器 │
│ └────────────┘
│ ┌────────────┐
├─┤ 继承样式 │
│ └────────────┘
│ ┌──────────────────┐
└─┤ 浏览器预定义样式 │
└──────────────────┘
──────────────────────────────────────────────────────────────────────
【低】
参考
- 【W3C】计算选择器的优先级
