CSS层叠规则：
1、找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。
2、按权重（!important）和来源对应用到给定元素的所有声明进行排序。
3、按特殊性对应用到给定元素的所有声明进行排序，有较高特殊性的元素权重要大于有较低特殊性的元素，0特殊性比无特殊性要强（继承）。
4、按出现顺序对应用到给定元素的所有声明进行排序，后面出现的声明权重要大于前面出现的声明，即后定义的样式会覆盖前面定义的样式。（适用于特殊性一样的时候）
解读：
一、权重和来源
来源：
1、创作人员（开发者）
1）、外部样式，即<link>引用的CSS后缀文件；
2）、内部样式，即写在<style></style>标签内的样式；
3）、内联样式，即直接写在style属性内的样式（网页设计强调结构、表现、行为三者分离，不建议使用。）；
2、读者（用户自定义样式：一些页面中会提供一些让用户自定义字体大小颜色等的快捷键；）
3、用户代理（最主要的是：浏览器默认样式）
权重（由大到小的顺序排序）：
1）读者的重要声明（!important）
2）创作人员的重要声明（!important）（高于内联样式！）
3）创作人员的正常声明
4）读者的正常声明
5）用户代理的声明
二、样式继承
文档应用声明还有一个很重要的概念，即继承：它依赖于祖先-后代的关系的，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
CSS中的继承也是有选择性的，并不是全部CSS都继承，大多数框模型属性都不能继承，例如，内、外边距、背景和边框等。
例如：一个body定义了的颜色值也会应用到段落的文本中。
三、选择器的特殊性
1、对于内联样式，特殊性首位加1，即1，0，0，0。
2、对于选择器中出现的ID属性值，加0，1，0，0， 有多少个ID值就在第二位加几位。
3、对于选择器中出现的类属性值，属性选择及伪类，加0，0，1，0，共出现多少个就在第三位加几位。
4、对于选择器中出现的元素，以及伪元素，加0，0，0，1，共出现多少个就在第四位加几位。
5、通配符对特殊性没有任何贡献，即特殊性是0，0，0，0。
6、结合符没有特殊性，连0特殊性也没有。
7、继承的CSS完全没有特殊性，连0特殊性也没有。
注意:因为通配符*的特殊性是0， 而继承的CSS是没有特殊性的，连0也没有，所以，通配符的权重要大于继承。
特殊性计算示例：
h1{color:red;} /*specificity = 0,0,0,1*/ p em{color:purple;} /*specificity = 0,0,0,2*/ .grape{color:yellow;} /*specificity = 0,0,1,0*/ *.grape{color:yellow;} /*specificity = 0,0,1,0*/ p.grape em.dark{color:maroon;} /*specificity = 0,0,2,2*/ #grape{color:blue;} /*specificity = 0,1,0,0*/ div#grape *[href] {color:silver;} /*specificity = 0,1,1,1*/ html > body > table tr[id="totals"] td ul > li{color:maroon;} /*specificity = 0,0,1,7*/ h1 + p{color:black;} /*specificity = 0,0,0,2*/