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.用户代理的声明。
按特殊性排序:根据上文提出的规则特殊性计算规则进行特殊性计算,特殊性高的胜出。
按顺序排序:当出现两个权重,来源和特殊性都相同的规则,两者实力相当。那么就只能按照最后到的胜出,正所谓“长江后浪推前浪,一浪更比一浪强”。
小结,样式表的最终渲染结果就是各个声明规则按照权重,来源,特殊性,顺序来进行排序的,胜出的才能有“露脸”的机会。