CSS样式表的层叠规则
发布于 2015-09-21
今天无意间看到一个前端面试题，是考关于样式表规则特殊性计算的问题。CSS样式表规则排序问题关系到样式的渲染解析，如果不能很好的掌握特殊性的计算以及层叠规则，将会在编写CSS的时候出现编写的样式达不到预想效果的情况。所以今天花点时间总结一下CSS样式表的权重和层叠问题。
首先，每个选择器都有特殊性这个概念。对于每个选择器，用户代理会计算选择器的特殊性，根据特殊性的高低来进行比较。特殊性的值包括四个部分，如0，0，0，0 。具体计算规则如下：
1.对于各个元素后加！important 的规则权重最高。
2.对于各个元素的内联样式，特殊性加 1，0，0，0 （就是1000）。
3.对于给定的各个ID属性值，特殊性加 0，1，0，0 （就是100）。
4.对于给定的各个类属性，属性选择或伪类，特殊性加 0，0，1，0 （就是10）。
5.对于给定的各个元素和伪元素，特殊性加 0，0，0，1（就是1） 。
6.结合符和通配符没有任何特殊性贡献。计算出了各个选择器规则的特殊性，还不能最终确定页面的渲染规则，还需要根据层叠规则进行排序。
按权重排序：应用到同一元素的相同规则，如果其中一个规则有！important 声明，则这个规则胜出。
按来源排序：选择器的权重同时会受到规则来源来进行排序，总共分为5个级别，权重由大到小依次为：
1.读者的重要声明。
2.创作人员的重要声明。
3.创作人员的正常声明。
4.读者的正常声明。
5.用户代理的声明。
按特殊性排序：根据上文提出的规则特殊性计算规则进行特殊性计算，特殊性高的胜出。
按顺序排序：当出现两个权重，来源和特殊性都相同的规则，两者实力相当。那么就只能按照最后到的胜出，正所谓“长江后浪推前浪，一浪更比一浪强”。
小结，样式表的最终渲染结果就是各个声明规则按照权重，来源，特殊性，顺序来进行排序的，胜出的才能有“露脸”的机会。
