CSS设计指南之CSS三种机制:继承、层叠和特指

一.继承

CSS中的祖先元素也会向后代传递一样东西:CSS属性的值。body元素是所有元素的祖先，所有标签都是它的后代，比如为body元素设置一种字体，那么文档中的所有元素，无论它在层次结构中多么靠下，都将继承这些样式。CSS中有很多属性都可以继承，其中相当一部分都与文本有关。

二.层叠

层叠，就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程。目的是让浏览器面对某个标签特定属性的多个来源时，确定最终使用哪个值。

1.样式来源

• 浏览器默认样式表:因为你还没有显示设置CSS属性，h1就会显示粗体，em显示斜休。
• 用户样式表:查看网页的用户也可以提供样式表，尽管这样的用户不多见，这个选择对于视障用户很有用，可以通过用户样式表，强制浏览器加载的所有网页都以更大的字体显示。
• 链接样式表
• 嵌入样式
• 行内样式

既然有这样多的样式来源，那么元素到底应该应用哪个样式中的属性设定呢，接下来就要了解层叠规则。

2.层叠规则

层叠规则1:找到应用给每个元素和属性的所有声明。

层叠规则2:按照顺序和权重排序。

浏览器依次检查5个来源，并设定匹配的属性。如果匹配的属性在下一个来源中也有定义，则更新该属性的值，如此循环，直到检查完全部5个来源为止。最终某个属性被设定成什么值，就用什么值来显示。

但是有一个另外，就是可以使用"!important"来声明权重，于是就算层叠的下一个来源设定了其他的属性值，最终也会使用应用了"!important"声明权重的样式。

此外应注意!important是不会被继承的。从下图可以了解到:span继承了p的color属性设定，但是行内样式显示覆盖掉了继承的样式

层叠规则3:按特指度排序。

特指度其实表示一条规则有多明确。

如果某个样式表中包含如下规则:

p{font-size:12px;}

p.largeText{font-size:16px;}

那么下面的段落

<p class="largeText">A bit of text</p>

将会显示16像素高的文本，因为第二条规则的选择符既包含标签名也包含类名，所以意义更明确，结果第二条规则会覆盖第一条规则中的同名属性。那么如何判别哪个声明特指度更高呢？

三.计算特指度

记分规则 I - C - E,

I代表ID，每个元素的ID是唯一的，所以它的辨识是最高的，比如我说一个身份证号，你肯定知道我在说谁。选择符中有一个ID，就在I的位置上加1.

C代表Class,代表类别。每个Html文档中，有许多元素的class属性会相同，所以辨识度次之。选择符中有一个类，就在C的位置上加1.

E代表Element,代表元素的种类，比如p、div等，比如我说div你在哪呢，没有人会知道我在说哪个div。选择符中有一个元素名，就在E的位置上加1.

在I项得分高的胜出，如果在I项的得分相同，则在C项得分高的胜出，如果在C项得分相同，则在E项得分高的胜出。如果最后I、C、E三项得分都相同，那么后声明的规则胜出。元素会应用辨识度最高的CSS属性声明。

下面通过几个例子来理解特指度。

p                                            0 - 0 - 1

p.largeText                              0 - 1 - 1

p#largeText                             1 - 0 - 1

body p#largeText                     1 - 0 - 2

body p#largeText ul.mylist        1 - 1 - 3

总结:

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

2.特指度更高的声明，无论它在哪里，都会胜出。

3.设定的样式胜过继承的样式,此时不用考虑特指度。