概述
层叠就是对样式的层叠。是某种样式在样式表中逐层叠加的过程。让浏览器对某个标签特定属性值的多个来源，最终确定使用那个值。层叠是整个CSS的核心机制。
HTML文档样式的来源
1.浏览器默认样式，每个浏览器本身就有一套默认的样式
2.用户样式，这对于视障用户很重要
3.作者样式。也就是Web开发者设计的样式
浏览器层叠各个样式的顺序：
浏览器会按照上面的顺序，依次检查每个样式的来源，并更新相关标签的设定，当整个检查更新结束后，再将每个标签以最终设定的样式显示出来
层叠规则
规则一：找到应用给每个元素和属性的所有声明。
检查每一条CSS规则,并标记出受到影响的HTML标签
规则二：按照顺序和权重排序
浏览器依次检查5个来源，匹配并且更新有定义的值，声明也可以通过！important增加权重，例如
a{font-size: 30px;color: red !important;}，这里a的color值会始终被设置成red。而忽略5个样式表
规则三：计算选择符特指度进行排序
特指度(specificity)即一条规则有多么明确，选择符的特指度由它所包含多少标签、类名和id决定
规则四：顺序决定权重
在特指度相同的情况下，后声明的规则胜出
补充： CSS特指度的计算规则
CSS选择符的特指度，由它选择符中包含标签的多少、class和id决定
特指度的计算
计分公式：“ I-C-E ” 三个字母用“ - ”分隔符组成
①选择符中有一个id, " I " 位置加1
②选择符中有一个class，“C” 位置加1
③选择符中有一个标签(元素)，“ E ” 位置加1
④得到一个“三位数”，这并非真正意义上的三位数
按选择符照特指度计算规则，下面是特指计算的例子
p{font-size:20px;} 特指度001 p.largetext{font-size:30px;} 特指度011 p#largetext{font-size: 40px;} 特指度101 body p#largetext{font-size:50px;} 特指度102 body p#largetext ul.mylist{font-size:60px;} 特指度113 body p#largetext ul.mylist li{font-size:70px;} 特指度114
查理版简单层叠要点—《CSS设计指南》一书
规则一：包含id的选择符胜过包含class选择符，包含class选择符胜过包含标签的选择符
规则二：如果几个不同来源样式都为同一标签的同一属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式，在链接样式中，如果特指度相同，后声明胜过先声明
规则三：手动设定样式胜过继承样式