层叠

CSS（Cascading Style Sheets ）中文译名层叠样式表，说明其中的Cascading很重要，意味着CSS规则有层叠的特性。

什么是层叠？由于HTML中同一个元素可以被多种选择器所选择，如果这里的多个选择器的规则对于元素的同一个属性指定不同的属性值，那么应该取那个属性值呢？层叠说的就是多条CSS规则一层层地堆叠在一起时哪一条有优先权，所以层叠特性就是用来决定哪条CSS规则占优从而决定元素的属性值。

决定CSS规则的优先被下面三种要素所决定：

1.重要性

2.专用性

3.源代码次序

从上至下，当一条规则含有前一种要素特性，即使该规则在后面的要素特性中胜出，但最终还是由该要素来决定是否CSS规则是否占优。举例来说，如果规则A的专用性和源代码次序比规则B的高，但是规则B的重要性比规则A高，那么最终还是规则B胜出（即取规则B的属性值）。

重要性

重要性，说的是含有“!important”关键字作为后缀的属性，例如：

.better {
  border: none !important;
}

要注意一个CSS声明的重要性取决于它被指定在什么样式表内——用户可以设置自定义样式表覆盖开发者的样式，例如用户可能有视力障碍，想设置字体大小对所有网页的访问是双倍的正常大小，以便更容易阅读。

相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明：

1. 在用户代理样式表的声明 (例如：浏览器在没有其他声明的默认样式).

2. 用户样式表中的普通声明（由用户设置的自定义样式）。

3. 作者样式表中的普通声明（这是我们设置的样式，Web开发人员）。

4. 作者样式表中的重要声明

5. 用户样式表中的重要声明

Web开发者的样式表覆盖用户的样式表是合理的，所以设计可以保持预期，但是有时候用户有很好的理由来重写web开发人员样式，如上所述，这可以通过在用户的规则中使用!important。

专用性

 专用性是用来衡量一个选择器专用程度的说法，就是说这个选择器可以选择多少元素，它选择元素的范围越少，专用性就越强，这里是广义上的说法。具体来说就是，类选择器比元素选择器的专用性要强，因为不是每个元素都带class，同样地，ID选择器比类选择器的专用性更强，一般来说同一个HTML内的每个ID都是独占的，即只针对一个元素，而class可以设置多个元素，所以这里ID选择器的专用性最强，

一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字：

1. 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。

2. 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。

3. 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。

4. 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

PS：通用选择器 (*), 复合选择器 (+, >, ~, ' ') 和否定伪类 (:not) 在专用性中无影响。

源代码次序

如果多个相互竞争的选择器具有相同的重要性和专用性，那么就该考虑源代码次序。很简单，在CSS源代码中，后面的规则优先于（覆盖）前面的规则：

p {
  color: blue;
}

/* 这条规则会取代上面那条，即段落字体颜色会是红色 */
p {
  color: red;
}

多条CSS规则混合使用时

在考虑所有这些层叠理论和什么样式优先于其他样式被应用时，所有这些都发生在属性级别上——属性覆盖其他属性，但不会让整个规则凌驾于其他规则之上。当多个CSS规则匹配相同的元素时，它们都被应用到该元素中。只有在这之后，任何相互冲突的属性才会被评估，以确定哪种风格会战胜其他类型。

例如下面的代码示例：

<p>I'm <strong>important</strong></p>

/* 取值: 0002 */
p strong {
  background-color: khaki;
  color: green;
}

/* 取值: 0001 */
strong {
  text-decoration: underline;
  color: red;
}

这里两条规则都指向同一个段落的一段“important”，但是只有color这个属性是冲突的，而background-color和text-decoration都会应用到元素中，由于color属性不含“!important”后缀，所以会根据专用性来指定属性值，最后由第一条规则中的color:green；胜出，段落中的“important”会是显示绿色的。

继承

CSS的继承就是某一个元素的属性会被其子元素所继承，但是事实上为了使用的方便性，有些元素是自带继承特性，有些则不是。例如，font-family和color这些字体设置的属性是自带继承特性的，而margin、padding、border和background-image则不是。一般来说，哪些属性是否应该默认继承都是符合我们一般的常识，例如字体这类一般都是页面统一所以默认集成从而不需要每个子元素都单独设置，而边距、边框和背景图这些则不应该默认继承，不然布局和元素间相对位置会错乱。具体到各种各样属性的继承特性可以查看CSS参考。

CSS在处理元素继承方面有四种特殊的通用属性值：

• inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。

• initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。

• unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。（inherit和initial的结合）

• revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式。

其中initial和unset在IE中不被支持。

另外，CSS中还有一个all属性，可以用来快速设置一个元素的所有属性为inherit、initial、unset或revert中的一个，例如：

p{
    all: unset;
}

上面代码将重置段落相关的所有属性（unicode-bidi和direction除外）为自然值。