CSS 结构和层叠

选择器的特殊性

在CSS中针对某个元素的多个相同的规则，浏览器会计算其特殊性。如果一个元素有多个冲突的规则，具有最高特殊性的声明会胜出。

特殊性值的表述为4个部分，0,0,0,0，规则如下

1. 对于选择器中给定的各个ID属性值，加0,1,0,0;

2. 对于选择器中给定的各个类属性值,属性选择,伪类,加0,0,1,0;

3. 对于选择器中给定的各个元素和伪元素,加0,0,0,1;

4. 通配符（*）的特殊性为0,0,0,0;

5. 结合符 和 继承 没有特殊性;

6. style 的重要性为1,0,0,0;

7. !import的声明没有特殊性，但和非!import声明在一起时，总是使用含!import的声明；

   注：非0的数值越靠前，特殊性越高，同一位置的非0的数值，值越大，特殊性越高

   注：继承没有特殊性，甚至连0特殊性都没有，而通配符有特殊性，所以通配符的特殊性 大于 继承

   注：内联样式style和!important使用同一属性时，!important 胜出

例：

h1 { color: red; } /* 0,0,0,1*/

body h1 { color: red } /* 0,0,0,2*/

h2.warning { color: red } /* 0,0,1,1 */

html > body table tr[id="total"] td ul > li { color: red; } /*0,0, 1,7 */

继承

样式不仅应用到指定的元素，还会应用到它的后台元素，即继承。

大多数框模型属性（外边距、内边距、背景和边框等）都不能继承。

层叠

特殊性相同的规则同时应用在同一元素上时，浏览器通过层叠来解决样式冲突。

层叠是通过结合继承和特殊性做到的。

层叠规则：

1. 找出所有相关的规则

2. 按显示权重对应用到该元素的所有声明排序

   权重如下：

   1. 读者的重要声明

   2. 开发者样式的重要声明

   3. 开发者样式的正常声明

   4. 读者的正常声明

   5. 浏览器的默认样式

      注： 读者的声明是读者自己写的样式，IE可以通过Internet 选项 -> 外观 -> 辅助功能 -> 用户样式表来指定样式文件。Chrome可以使用Stylish扩展来实现

3. 按特殊性对应用到给定元素的所有声明排序。

4. 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或者文档中越往后出现，权重越大。