css又名样式层叠表,该命名体现了css的二要义:样式和层叠。样式不用说了,就是我们再css文件中为特定元素指定的样式规则。而层叠往往是被大家忽视的部分,因为它又规范中隐形的计算规则得到,用来给每个规则分配重要度。如果你的浏览器未按照你的规则为页面实现样式,而你的样式书写又没有问题,这时候就是考虑层叠或者特殊性的时候。
关于层叠
浏览器将样式规则分为三类:
- 作者样式
- 用户样式
- 浏览器/户代理代理样式
浏览器解释顺序按照列表排列顺序执行。需要注意的是带有!important的用户样式高于一切样式。
关于特殊性
在层叠级别相同的时候。相同的元素可能被不同的选择器所选中,这时候我们要通过计算这些选择器的特殊性来决定浏览器呢会执行哪种样式。所有选择器可以按照重要性递减分为a,b,c,d四类:
如特殊性相同,采用后定义优先规则。
类型 | 包含选择器 | 实例 | 以10为基数的特殊性 |
---|---|---|---|
a | 行内样式 | 1000 | |
b | id选择器 | ID1:{} | 0100 |
c | 类选择器,伪类选择器,属性选择器 | .color title[“ad”]::hover | 0030 |
d | 类型选择器,伪元素选择器 | div p a | 0003 |