深入解析CSS样式层叠权重值

读到《重新认识CSS的权重》这篇,鬼哥在文章最后给出了便于记忆的顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。那么这个顺序是怎么得出来的呢?实际上在CSS2规范关于具体性(specificity)的定义中,描述是非常明确的,但是很多中文版本的 CSS 图书中采用了 10 进制的简单相加计算方式(包括第一版《CSS 权威指南》,第二版中已经纠正)。因此把规范中对CSS层叠优先级的相关定义意译一下,希望给初入门或对权重计算尚有疑惑的朋友提供一些参考。

根据 CSS 规范,具体性越明确的样式规则,权重值越高。计算权重值的依据,并不是许多文章所描述的那样“class是10,标签是1,ID是100”之类——虽然这样在大多数情况下能够得到正确的结果。

选择器权重值的计算

  • A:如果规则是写在标签的style属性中(内联样式),则A=1,否则,A=0. 对于内联样式,由于没有选择器,所以 B、C、D 的值都为 0,即 A=1, B=0, C=0, D=0(简写为 1,0,0,0,下同)。
  • B:计算该选择器中ID的数量。(例如,#header 这样的选择器,计算为 0, 1, 0, 0)。
  • C:计算该选择器中伪类及其它属性的数量(包括类选择器、属性选择器等,不包括伪元素)。 (例如, .logo[id='site-logo'] 这样的选择器,计算为 0, 0, 2, 0)。
  • D:计算该选择器中伪元素及标签的数量。(例如,p:first-letter 这样的选择器,计算为0, 0, 0, 2)。

CSS2 规范中给出的一些例子:

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

根据这样的定义,所以很多文章简单地把规则归纳为:内联样式的权重值是1000,ID选择器的权重值是100,class选择器的权重值是10,标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值,数字越大权重值越高。

大多数情况下,按照这样的理解得出的结论没有问题,但是遇到下面这样的情况就出现问题了:

/* 样式一 */
body header div nav ul li div p a span em {color: red}

/* 样式二 */
count {color: blue}

按照错误的计算方法,样式一的权重值是11,样式二的权重值是10,如果这两条规则用于同一个元素,则该元素应该是红色。实际结果却是蓝色。

权重值的比较

按照四组计算的正确方法,上面例子中的样式一权重值应该是 0, 0, 0, 11,样式二的权重值是 0, 0, 1, 0。

根据规范,计算权重值时,A, B, C, D 四组值,从左到右,分组比较,如果 A 相同,比较 B, 如果 B 相同,比较 C, 如果 C 相同,比较 D, 如果 D 相同,后定义的优先。

样式二和样式一的 A、B 相同,而样式二的 C 大于样式一,所以,不管 D 的值如何,样式二权重值都大于样式一。这就是正确的答案。

特殊的 !important

在按照 ABCD 四组计算比较之外,在定义样式的时候,还可以对某一个属性应用 !important. 对于一直从事编程而没做过重构的人,需要特别注意的是这里的 "!" 与其在编程语言中的意义刚好相反,不是代表“不重要”而是代表“很重要”。

CSS2 规范中规定:!important 用于单独指定某条样式中的单个属性。对于被指定的属性,有 !important 指定的权重值大于所有未用 !important 指定的规则。

例如:

/* 样式一 */
#header nav ul li.current {color: red; font-weight: bold;}

/* 样式二 */
li:hover {color: blue !important; font-weight: normal;}

就整条规则而言,样式一的权重值为 0, 1, 1, 3,而样式二的权重值仅为 0, 0, 0, 2。所以应用于相同元素时,应该样式一生效。但是对于 color 这个属性,由于在样式二中用 !important 做了指定,因此color 将应用样式二的规则。而 font-weight 则按照规定用样式一的规则。

如果多条规则中都对同一个属性指定了 !important 呢?这时候 !important 的作用相互抵销,依然按照ABCD四组计算比较。

因此 !important 的作用只有在具有唯一性时才能提现,但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了 !important 的属性,所以最好的办法就是:不要使用 !important.

关于 inherit

除了直接指定到元素上的样式规则以外,每个属性值还有一个可能为 inherit(继承) 的值。表示元素的该样式属性继承自父级元素,与父级元素的定义一致。比如:

  .list .item { color: red }
    
  

<ul class="list">
    <li class="item">
        <span>某些文字</span>
    </li>
</ul>

上例中,样式规则并未针对 span 标签指定 color 属性, 但是 span 中的文字会显示为红色, 这就是因为 spancolor 属性默认值为 inherit.

对于 inherit 的属性,只要记住一点: 继承而来的属性值,权重永远低于明确指定到元素的定义。只有当一个元素的某个属性没有被直接指定时,才会继承父级元素的值。例如:

  span { color: blue }
    .list .item { color: red }
    
  

<ul class="list">
    <li class="item">
        <span>某些文字</span>
    </li>
</ul>

同样的例子, 第一条规则的权重是 0,0,0,1, 第二条规则的权重是 0,0,2,0. 虽然第二条规则的权重更高,但是它是针对 li 元素的直接指定,并不是针对 span 元素定义的,所以计算 spancolor 属性权重值时,实际上就是 inherit 的红色与直接指定的蓝色的对比。按照规则,只要有直接指定的值(蓝色),就不会再取继承的值(红色),所以 span 中的文字显示为蓝色。

这条规则最典型的场景就是链接文字的颜色。由于一般浏览器自带的样式表都有针对 a 标签的颜色及下划线的直接指定,所以网页样式表中对 a 标签的父级元素指定 color 属性及 text-decoration 属性,通常不会起作用。但是我们可以通过下面的 reset 来改变这一点:

<style>
a { color: inherit; text-decoration: inherit }
.item { color:red }
</style>
<p class="item"><a href="#">链接文字</a></p>

在上例中,由于我们的样式表对 a 标签直接指定了 colortext-decoration 属性值, 覆盖了浏览器的默认样式,所以在没有特别指定 a 标签的颜色和下划线定义的前提下, 会从父级元素 p 继承,因此链接会显示为红色(有补充)。

特别补充:inherit 在 CSS1 规范中并未定义,所以 IE6, IE7 以及 IE8 的 QuirksMode 不支持。

总结

  1. 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D];
  2. A 表示内联样式,只有 1 或者 0 两个值;
  3. B 表示规则中 ID 的数量;
  4. C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量;
  5. D 表示规则中标签和伪元素的数量;
  6. 比较时从高位到低位(从 A 到 D)分别比较,高位相同才需要比较低位;
  7. !important 标记的属性权重值无视没用 !important 指定的一切情况;
  8. 多次指定 !important 时,相互抵销。
  9. inherit 而来的属性定义,优先级低于任何直接指定的属性值。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

【Java案例】打印五环

案例描述 在屏幕上画出奥运五环旗,如图1.7所示。 ? 图1.7 奥运五环旗 案例分析 观察奥运五环旗的图案,直观的感觉,由五个圆组成,每个圆的颜色不一样...

41350
来自专栏编程坑太多

D3.js仪表盘的实现

57820
来自专栏天天

框架设计续集(三)

10630
来自专栏cnblogs

深入理解和应用display属性(二)

四、inline-block 此类元素是inline + block的合体 1) margin和padding都有效;width和height都有效; .inl...

22060
来自专栏web前端教室

20170108_先行者周日群视频课程——文字版

各位同学们大家好,又到周日了。因为1月1号是新年放假,所以今天也可以算是2017年的第一个周日,不知各位都对2017年有什么安排,而2016年又有哪些收获。我只...

20960
来自专栏数据结构与算法

Stirling数

第一类: 定义 第一类Stirling数表示表示将 n 个不同元素构成m个圆排列的数目。又根据正负性分为无符号第一类Stirling数 ? 和带符号第一类...

337100
来自专栏用户2442861的专栏

python数字图像处理(12):基本图形的绘制

skimage.draw.set_color(img, coords, color)

20420
来自专栏柠檬先生

Sass 基础(七)

Sass Maps 的函数-map-remove($map,$key),keywords($args)     map-remove($map,$key) ...

22650
来自专栏进击的君君的前端之路

CSS理解之border

17530
来自专栏程序员的诗和远方

一个比想象中更骚气的圆-svg实现

之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环),其实SVG也可以实现类似的效果,而且两者api惊人的相似。 关于SVG SVG是一种矢量...

46670

扫码关注云+社区

领取腾讯云代金券