三.CSS层叠机制

概述

层叠就是对样式的层叠。是某种样式在样式表中逐层叠加的过程。让浏览器对某个标签特定属性值的多个来源，最终确定使用那个值。层叠是整个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选择符胜过包含标签的选择符

规则二：如果几个不同来源样式都为同一标签的同一属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式，在链接样式中，如果特指度相同，后声明胜过先声明

规则三：手动设定样式胜过继承样式