层叠

在之前的特殊性中，我们指出了一个元素对应多个声明的特殊性值比较，但是我们规避了一个元素多个同种声明的情况，首先让我们了解下CSS2.1的层叠规则:

1. 找出所有相关的规则，这些规则都包含于一个给定元素匹配的选择器

2. 按照显示权重对应用到该元素的所有声明排序：标志!import要比没有的权重要高。

这里提到了是那种样式来源：创作人员，用户代理，读者；

分别指的是：

​ 创作人员 => 前端开发人员写进代码的样式;

​ 用户代理 => 浏览器自带的样式，比如a标签（带属性href）的a:link为蓝色;

​ 读者 => 就是读者通过浏览器提供的接口；

3. 按照特殊性对应用到给定元素所有声明排序，高特殊性的元素权重大于低特殊性的元素（继承没有特殊性，结合符和通配符的特殊性为0，但是两者区别并不相等）。

4. 按照出现的顺序对给定元素的声明排序，一个声明在样式表中出现的越后面，它的权重越大；如果存在外部引入的样式表，一般认为外部引入的样式表声明在前，权重低，主样式表中的声明在后，权重高；

按权重和来源排序

<!--在这里具有!important的样式，根据层叠规则，权重是高于其他的，所以p元素会是灰色（grey）的，em也会继承这个灰色-->
<style type="text/css">
  p { color: grey !important; }
</style>

<p style="color: black;">Well,<em>Hello</em>there!</p>

一般来说权重从大到小的顺序如下:

1. 读者的重要声明；
2. 创作人员的重要声明；
3. 创作人员的普通声明；
4. 读者的普通声明；
5. 用户代理的声明；

按特殊性排序

按照特殊性排序，按照上一篇文章中计算特殊性，特殊性值大的胜出

按顺序排序

当我们有作用于一个元素的两个或多个规则的权重，特殊性等因素完全相同，那么在样式表中后出现的胜出，最常见的如下：

h1 { color: grey; }
h1 { color: yellow; } /*这条规则会胜出*/ 

即使存在外部倒入的样式表，在上述相同的情况下，还是主样式表规则胜出