CSS中的样式层叠机制Cascade
一、样式冲突
样式冲突是CSS渲染过程要解决的一个关键问题，样式冲突主要由两个原因造成：
- 元素包含了不同对象所赋予的样式：浏览器、用户、作者。其中，浏览器样式是指不对元素赋予样式时，元素所表现出来的样式，也就是浏览器赋予的元素默认样式；用户样式是指用户通过浏览器插件设定的样式，比如色弱者会对文字颜色进行修改；作者样式只是程序员所编写的CSS样式。
- 程序员经常会在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] 伪类与伪元素的区别
参考资料：