CSS规则的继承与层叠

在一个较大的样式表中,可能会有很多条规则都选择同一个元素的同一个属性。比
如,一个带有类属性的段落,可能会被一条以标签名作选择符的规则选中并指定一
种字体,而另一条以该段落的类名作选择符的规则却会给它指定另一种字体。我们
知道,字体属性在任意时刻都只能应用一种设定,那此时该应用哪种字体呢?为解
决类似的冲突,确定哪条规则“胜出”并最终被应用,CSS 提供了三种机制:继承、 层叠和特指。

继承

CSS 中有很多属性是可以继承的,其中相当一部分都跟文本有关,比如颜色、字体、
字号。然而,也有很多 CSS 属性不能继承,因为继承这些属性没有意义。这些不能
继承的属性主要涉及元素盒子的定位和显示方式,比如边框、外边距、内边距。

层叠

浏览器有五个样式来源，其顺序如下：
1. 浏览器默认样式表
2. 用户样式表
3. 作者链接样式表(按照它们链接到页面的先后顺序)
4. 作者嵌入样式
5. 作者行内样式

浏览器会按照上述顺序依次检查每个来源的样式,并在有定义的情况下,更新对每
个标签属性值的设定。整个检查更新过程结束后,再将每个标签以最终设定的样式
显示出来。

层叠规则

层叠规则一:找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时,都会据此查到每一条 CSS 规则,标识出所有受到影响的 HTML 元素。

层叠规则二:按照顺序和权重排序。浏览器依次检查5个来源,并设定匹配的属性。如果匹配的属性在下一个来源也有定义,则更新该属性的值,如此循环,直到检查完页面中所有标签受影响属性的全部5个来源为止。最终某个属性被设定成什么值,就用什么值来显示。

层叠规则三:按特指度(优先级)排序。除了有点拗口之外,特指度(specificity)其实表示一条规则有多明确。如果没有特指度的考量,那为了让恰当的样式起作用,恐怕我们就免不了要频繁变换样式表中规则的顺序了。

I-C-E 方法计算特指度：
1. 选择符中有一个 ID,就在 I 的位置上加 1;
2. 选择符中有一个类,就在 C 的位置上加 1;
3. 选择符中有一个元素(标签)名,就在 E 的位置上加 1;
4. 得到一个三位数。

举一个简单的例子：

p       --->    0-0-1特指度为001=1
div#nav p.fist      --->    1-1-2特指度112=112

层叠规则四:顺序决定权重。如果两条规则都影响某元素的同一个属性,而且它们的特指度也相同,则位置最靠下(或后声明)的规则胜出。

层叠规则五:设定的永远大于继承的。从父级继承下来的规则，不管特指度有多大，都会被设定的规则覆盖。