CSS中的样式层叠机制Cascade

CSS中的样式层叠机制Cascade

一、样式冲突

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

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

二、Cascade机制

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

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

1.读者样式+!important
2.作者样式+!important
3.默认样式+!important
4.作者样式
5.读者样式
6.默认样式

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

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

三、Specificity值的计算方式

  Specificity可以看成是一个∞进制的4位数。作者样式的Specificity值由定义其的选择器决定，下表展示了各种选择器所定义的样式、HTML中的样式、继承样式的Specificity值对照表。组合选择器(E F，E>F，E+F，E~F)的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
元素选择器	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, background是不可继承的，具体可查阅书籍《CSS Pocket Reference》。

  更详细的CSS选择器介绍请见延伸阅读[1]，伪类与伪元素的区别分析请见延伸阅读[2]。

延伸阅读：

[1] CSS选择器备忘录

[2] 伪类与伪元素的区别

参考资料：

[1] CSS Pocket Reference