CSS-继承、层叠、特指

1 为什么要存在这三种机制（继承、层叠、特指）

在一个较大的样式表中，可能会有很多条规则都选择同一个元素的统一个属性，但是每个属性只能按照一种规则来进行显示，当多种规则应用于同一属性时，该属性到底是选择何种规则呢？为了解决这种冲突，需要确定一个规则的“优先级”。所以，CSS提供了这三种机制

2 继承

后代可以继承祖先的样式，例如，body是所有元素的祖先，所有标签都是他的后代

body {font-family:helvetica,arial,sans-serif;}

那么，文档中的所有元素，无论它在何种层次结构中，都继承这些样式

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

3 层叠

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

3.1 样式来源

a、浏览器有一个默认的样式表

b、用户可以提供样式表

c、作者样式表（网页设计师写的样式表）

浏览器层叠各个来源样式的顺序：

• 浏览器默认样式表
• 用户样式表
• 作者链接样式表
• 作者嵌入样式表
• 作者行内样式表

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

3.2 层叠的规则

3.2.1 特指度（specificity）表示一条规则有多明确

计算特指度：

I-C-E

1. 选择符中有一个ID，就在I的位置上加1；
2. 选择符中有一个类，就在C的位置上加1；
3. 选择符中有一个元素（标签）名，就在E的位置上加1。

得到一个三位数，但不能单纯地把它当做数字来比较，比如0-1-12与0-2-0相比，0-2-0的特指度更高

3.2.2 声明的权重

p {color:green !important;font-size:12pt;}

空格!important 分号(;)用于加重声明的权重。

加重声明的权重，也就是说，就应用这个样式了~不管是否还有其他优先级更高的样式(慎用~)

3.2.3 层叠的规则

1. 包含ID的选择符 > 包含类的选择符 > 包含标签名的选择符
2. 行内样式 > 嵌入样式 > 链接样式
3. 设定的样式胜过继承的样式，此时不用考虑特指度