CSS层叠
本文最后更新于:2020年3月28日 下午
层叠
在之前的特殊性中,我们指出了一个元素对应多个声明的特殊性值比较,但是我们规避了一个元素多个同种声明的情况,首先让我们了解下CSS2.1的层叠规则:
找出所有相关的规则,这些规则都包含于一个给定元素匹配的选择器
按照显示权重对应用到该元素的所有声明排序:标志!import要比没有的权重要高。
这里提到了是那种样式来源:创作人员,用户代理,读者;
分别指的是:
创作人员 => 前端开发人员写进代码的样式;
用户代理 => 浏览器自带的样式,比如a标签(带属性href)的a:link为蓝色;
读者 => 就是读者通过浏览器提供的接口;
按照特殊性对应用到给定元素所有声明排序,高特殊性的元素权重大于低特殊性的元素(继承没有特殊性,结合符和通配符的特殊性为0,但是两者区别并不相等)。
按照出现的顺序对给定元素的声明排序,一个声明在样式表中出现的越后面,它的权重越大;如果存在外部引入的样式表,一般认为外部引入的样式表声明在前,权重低,主样式表中的声明在后,权重高;
按权重和来源排序
1 |
|
一般来说权重从大到小的顺序如下:
- 读者的重要声明;
- 创作人员的重要声明;
- 创作人员的普通声明;
- 读者的普通声明;
- 用户代理的声明;
按特殊性排序
按照特殊性排序,按照上一篇文章中计算特殊性,特殊性值大的胜出
按顺序排序
当我们有作用于一个元素的两个或多个规则的权重,特殊性等因素完全相同,那么在样式表中后出现的胜出,最常见的如下:
1 |
|
即使存在外部倒入的样式表,在上述相同的情况下,还是主样式表规则胜出