选择器优先级计算

选择器优先级计算

---

 浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

选择器优先级决定了哪一条样式规则会被浏览器应用在元素上。

优先级是如何计算的？

优先级就是分配给指定的 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】计算选择器的优先级