前言
在样式表中，同一个文档元素可能被定义了多条样式规则。碰到这种情况时，CSS 通过一个被称为 层叠（Cascade） 的过程来处理冲突。本文介绍了层叠的重要度次序以及样式表规则的特殊性。
层叠
CSS 层叠是指 CSS 样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，它会选择应用权重高的 CSS 选择器所指定的属性。这个过程一般也被描述为权重高的规则覆盖权重低的规则。
层叠给每个规则分配一个重要度，它的重要度次序如下：
- 标有
!important的用户样式 - 标有
!important的作者样式 - 作者样式
- 用户样式
- 浏览器/用户代理应用的默认样式
作者的样式表是由站点开发者编写的，被认为是最重要的样式表。用户可以通过浏览器应用自己的样式，这些样式表的重要度低一级。最后是浏览器或用户代理使用的默认样式表，它们的重要度是最低的。但是，如果用户一定要使用自己的样式，可以通过将规则指定为 !important 来提高它的重要度，让它优先于任何规则，甚至优先于作者加上 !important 标志的规则。
在比较了样式规则的重要度之后，CSS 还会根据选择器的 特殊性 来决定规则的次序。具有更特殊选择器的规则优先于具有一般选择器的规则。如果两个规则的重要度、来源、特殊性都相同，则后定义的规则优先。
特殊性
特殊性指的是 CSS 选择器的特殊性。在样式表中，每个 CSS 选择器会被分配一个数字值，将规则的每个选择器的值加在一起，就计算出了规则的特殊性。
选择器的特殊性分为四个等级：a、b、c、d。
- 如果是行内样式，那么a = 1，否则a = 0
- b = ID选择器的数量
- c = 类、伪类、属性选择器的数量
- d = 元素选择器和伪元素选择器的数量
使用这些规则可以计算出任何 CSS 选择器的特殊性，abcd四个数字组合的数值最大的特殊性最大，优先级最大。
注意：通用选择器、子选择器、相邻同胞选择器的特殊性为空。
下表给出了一系列选择器及其相应的特殊性：
| 选择器 | 特殊性 |
|---|---|
| style = “” | 1, 0, 0, 0 |
| #wrapper #content {} | 0, 2, 0, 0 |
| #content .datePosted {} | 0, 1, 1, 0 |
| div#content {} | 0, 1, 0, 1 |
| #content {} | 0, 1, 0, 0 |
| p.comment .datePosted {} | 0, 0, 2, 1 |
| p.comment {} | 0, 0, 1, 1 |
| div p {} | 0, 0, 0, 2 |
| p {} | 0, 0, 0, 1 |
基本上，行内样式总是比其他任何规则特殊，具有ID选择器的规则比没有ID选择器的规则特殊，具有类选择器的规则比只有元素选择器的规则特殊。
记住，如果两个规则的特殊性相同，那么后定义的规则胜出。
继承
继承指的是子元素的样式继承父元素的样式。
很多人将继承和层叠混为一谈，虽然它们初看上去有点相似，但这两个概念实际上是很不一样的。
继承不是层叠。层叠是权重高的样式覆盖权重低的样式，而继承是子元素样式继承父元素样式。
继承而来的样式的特殊性为空（连0特殊性都没有）。如果你在父元素设置了样式，而子元素的样式并没有和父元素样式一样，出现这种情况是因为浏览器带有默认的样式，而继承的样式被浏览器默认的样式覆盖。所以如果不希望使用浏览器的默认样式，需要在样式表开头对样式重置。
