1
头图

面试问答

问:CSS选择器权重如何计算?(或者CSS选择器的优先级是如何计算的?)

答:CSS权重的计算分为四个等级a,b,c,d;其中HTML元素的style属性中定义的声明属于a级,id选择器属于b级,属性选择器、class类选择器和伪类选择器属于c级,类型选择器属于d级;四级当中a级权重值最高,d级权重值最低。权重值根据每个级别出现的数量进行计数,每个等级出现1次,就计数1次。权重值的比较按照a,b,c,d 四个等级计算出来的数字从高到低依次比较,如果相同等级下的值PK出结果,就不会进行后面的比较了。如果相同等级的数字相同,则继续比较下级的数字大小。其中有些选择器是不参与优先级的计算,其中包括:通用选择器『*』号,否定伪类:not选择器,组合选择器中的子类选择器、相邻兄弟选择器、普通兄弟选择器。不过否定伪类选择器当中的选择器是会参与选择器优先级计算的。包含!important的CSS声明是特殊的存在,不参与权重值的计算,比a,b,c,d四个等级都高;在同时都包含!important时,又会根据选择器的匹配规则计算权重值。谁的权重值高,应用谁的样式。

基本概念

CSS规则

CSS规则是由两个主要的部分构成:选择器,以及一条或多条声明;
CSS规则

选择器通常是需要改变样式的HTML元素;声明由一个属性和一个值组成。属性是希望设置的样式属性,每个属性有一个值(属性值),属性和值被冒号分开。

优先级

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

再重审一下,优先级是基于不同种类选择器组成的匹配规则。我们还用上面CSS规则当中的图片示例做说明,

// 选择器『p』就是计算优先级的『匹配规则』
p { font-size:14px; background:#ff0;}

ul#nav li.active a { font-size:14px; }
body.ie7 .col_3 h2~h2 { font-size:16px; }

//『ul#nav li.active a』 和 『body.ie7 .col_3 h2~h2』 是计算优先级的匹配规则

权重

权重是由匹配的选择器中的每一种选择器类型的数值决定的,权重计算得到的数字越大,相对应的匹配规则优先级越高。如果一个CSS声明在两个优先级相等的匹配规则中定义的时候,则按照匹配规则在CSS文件当中的顺序,在最后匹配规则中的CSS声明将会被应用到元素上。

示例

<div id="id" class="class">我的字体大小</div>
#id {
 font-size:18px;
}
.class {
 font-size:16px;
}

最后文字的大小是18px,根据选择器类型的计算结果#id的值是:1,0,0;.class的值是:0,1,0。

计算的过程我们先按下不表,在后面说明

点击查看代码示例

优先级相等的匹配规则

.class{
    font-size:18px;
}
[class='class']{
    font-size:16px;
}
最后文字的大小是16px,根据选择器类型的计算结果,.class的值是:0,1,0,[class='class']的值是:0,1,0。

点击查看代码示例

特异性

上面我们说#id的计算结果是:1,0,0;.class和[class='class']的计算结果是:0,1,0。为什么会计算出这样的值?这就是我们要说的特异性,英文specificity。下面引用W3C官方的原文:

A selector's specificity is calculated as follows:

  • count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  • count the number of ID attributes in the selector (= b)
  • count the number of other attributes and pseudo-classes in the selector (= c)
  • count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

选择器的特异性计算规则如下:

  • 如果CSS声明来自HTML元素的style属性,而不是带有选择器的规则,则计数为1,否则为0;(在HTML中,元素的style属性值是样式表规则。这些规则没有选择器;元素style属性定义的样式规则,在特异性计算当中用a表示,所以通常在HTML中,元素的style属性定义的样式表规则的特异性表示为:a=1,b=0,c=0,d=0。)
  • 计算选择器中id属性的数量,用b表示
  • 计算选择器中的其它属性(包括class属性)和伪类的数量,用c表示
  • 计算选择器中元素名称和伪元素的数量,用d表示

『特异性』这个词真的非常非常不好理解,根据语义完全不明白说的是什么意思,为了更好的理解,我用『权重值』来表示『特异性』。

计算示例

*              {}  /* a=0 b=0 c=0 d=0 -> 权重值 = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> 权重值 = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> 权重值 = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> 权重值 = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> 权重值 = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> 权重值 = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> 权重值 = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> 权重值 = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> 权重值 = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> 权重值 = 1,0,0,0 */
注意:当ID选择器被当做属性选择器使用的时候,比如[id='id'],权重值的计算会把它当中C级来计算

权重值计算规则

权重值 = a*num,b*num,c*num,d*num;

权重值的计算网上还有一种比较常见的说法:style属性定义的样式权重值是1000,一个id选择器权重值是100,一个属性和伪类选择器权重表示为10,一个元素名称和伪元素的权重值为1。比如:
权值的计算

按照我们说的权重值计算规则,其实图片中的total value 的值应该表示为:0,1,1,3。直接用数字113表示只是为了方便记忆,但选择器优先级的比较却不能通过数字来进行比较。比如:两条匹配规则,一个是11个属性选择器,另一个是1个id选择器,他们权重值进行比较时:

11个属性选择器得到的结果是110,二ID选择器得到的寄过是100。很明显『11个属性选择器』得到的数字值最大,是不是它的优先级最高呢。我们实验下:

HTML文本

<div id='id' class='c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11'>
    应用谁的样式
</div>

CSS样式

#id {
    background:red;
}

[id='id'][class~='c1'].c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{
 background:yellow;
}

你也可以点击示例亲自试一下

权重值的比较

当两个权值进行比较的时候,是从A到D逐级将等级位上的权重值(如 权值 1,0,0,0 对应--> A,B,C,D)来进行比较的,而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的,换句话说,低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的;请看下图:
权重值的比较
总结

  1. 权重值的比较按照a,b,c,d的等级逐级比较,如果同等级的值相同,继续向下级比较
  2. 如果计算得到的权重值相同,那么哪条匹配规则在最后,就应用谁的CSS声明
  3. !important 是超越上述权重值计算规则之外的,优先级最高。

不参与计算的选择器

并不是所有的选择器都参与权重值的计算规则,有些是不参与的,其中包括:

  1. 通用选择器『*』
  2. 否定伪类选择器『:not』
  3. 组合选择器『+,~,>』
否定伪类选择器: :not(), 虽然它本身是不计权重的, 但是写在它里面的 css selector 是需要计算权重的.

!important

!important是特殊的存在,!important 是不在 css 选择器的权重计算范围内的, 而它之所以能让 css 选择器生效是因为浏览器在遇见 !important 时会进行特殊的判断。当多个 !important 需要进行比较时, 会先计算其权重再进行比较。通常来说, 不提倡使用 !important。不过当我们需要覆盖style属性中定义的样式时,可以选择使用!important

其它说明

  • 优先级计算无视DOM树中的距离;比如:html pbody p的权重值一样,谁写在后面应用谁的CSS声明
  • 伪类选择器,属性选择器,class选择器的权重值一样

参考

计算选择器的特异性CSS2

分配属性值、级联、继承CSS22

计算选择器的特异性

前端杂谈:css权重

优先级

CSS层叠

CSS继承

深入理解CSS选择器优先级


mmcai
126 声望10 粉丝

勿忘初心,方得始终