CSS中的样式层叠机制Cascade

文章博客园地址

一、样式冲突

  样式冲突是CSS渲染过程要解决的一个关键问题，样式冲突主要由两个原因造成：

1. 元素包含了不同对象所赋予的样式：浏览器、用户、作者。其中，浏览器样式是指不对元素赋予样式时，元素所表现出来的样式，也就是浏览器赋予的元素默认样式；用户样式是指用户通过浏览器插件设定的样式，比如色弱者会对文字颜色进行修改；作者样式只是程序员所编写的CSS样式。
2. 程序员经常会在CSS中对同一元素进行重复定义，这往往是因为程序员整体局部的样式编写习惯造成的，当然这是好的习惯。

二、Cascade机制

  CSS设计了Cascade机制通过确定样式层叠的顺序来解决样式冲突的问题，其过程就是对所有冲突样式按照其对应的优先级进行排序，然后确定优先级最高样式为最终渲染样式。我将该排序过程归纳为三个级联的排序阶段。

Step1. 对所有冲突样式，按照设定其的对象优先级顺序进行排序；对象优先级顺序如下：

1.读者样式+!important2.作者样式+!important3.默认样式+!important4.作者样式5.读者样式6.默认样式

Step2. 对Step1中优先级相等的作者样式（作者样式+!important优先级、作者样式优先级）再分别按照样式Specificity值从大到小进行二次排序；

Step3. 对优先级相等的样式最后按照申明时间从早到晚进行排序。

三、Specificity值的计算方式

  Specificity可以看成是一个∞进制的4位数。作者样式的Specificity值由其定义方式所决定，下表展示了各种选择器所定义的样式、HTML中的样式、继承样式的Specificity值对照表。组合选择器的Specificity值等于所有单选择器Specificity值的累加和。比如div.aside p的权Specificity值=(0,0,0,1)+(0,0,1,0)+(0,0,0,1)=(0,0,1,2)；11个元素选择器的Specificity值(0,0,0,11)比一个类选择的Specificity值(0,0,1,0)小。

Selector type Example Specificity 通用选择器 * 0,0,0,0 组合选择器 + 0,0,0,0 元素选择器 div 0,0,0,1 伪元素选择器 ::first-line 0,0,0,1 类选择器 .warning 0,0,1,0 伪类选择器 :hover 0,0,1,0 属性选择器 [type=”checkbox”] 0,0,1,0 id选择器 content 0,1,0,0 HTML中的样式 style=”color: red;” 1,0,0,0 继承样式 —— 0,0,0,0

  其中，继承样式(Inheritance)是指从上级元素继承来的样式。CSS规定，DOM树中的下层元素会继承它上级父元素的部分样式。CSS定义了每个样式属性的可继承性，比如：padding, border, margin, and background是不可继承的，具体可查阅书籍《CSS Pocket Reference》。

参考资料：

[1] CSS Pocket Reference