CSS层叠

本文最后更新于:2020年3月28日 下午

层叠

在之前的特殊性中,我们指出了一个元素对应多个声明的特殊性值比较,但是我们规避了一个元素多个同种声明的情况,首先让我们了解下CSS2.1的层叠规则:

  1. 找出所有相关的规则,这些规则都包含于一个给定元素匹配的选择器

  2. 按照显示权重对应用到该元素的所有声明排序:标志!import要比没有的权重要高。

这里提到了是那种样式来源:创作人员,用户代理,读者;

分别指的是:

​ 创作人员 => 前端开发人员写进代码的样式;

​ 用户代理 => 浏览器自带的样式,比如a标签(带属性href)的a:link为蓝色;

​ 读者 => 就是读者通过浏览器提供的接口;

  1. 按照特殊性对应用到给定元素所有声明排序,高特殊性的元素权重大于低特殊性的元素(继承没有特殊性,结合符和通配符的特殊性为0,但是两者区别并不相等)。

  2. 按照出现的顺序对给定元素的声明排序,一个声明在样式表中出现的越后面,它的权重越大;如果存在外部引入的样式表,一般认为外部引入的样式表声明在前,权重低,主样式表中的声明在后,权重高;

按权重和来源排序
1
2
3
4
5
6
<!--在这里具有!important的样式,根据层叠规则,权重是高于其他的,所以p元素会是灰色(grey)的,em也会继承这个灰色-->
<style type="text/css">
p { color: grey !important; }
</style>

<p style="color: black;">Well,<em>Hello</em>there!</p>

一般来说权重从大到小的顺序如下:

  1. 读者的重要声明;
  2. 创作人员的重要声明;
  3. 创作人员的普通声明;
  4. 读者的普通声明;
  5. 用户代理的声明;
按特殊性排序

按照特殊性排序,按照上一篇文章中计算特殊性,特殊性值大的胜出

按顺序排序

当我们有作用于一个元素的两个或多个规则的权重,特殊性等因素完全相同,那么在样式表中后出现的胜出,最常见的如下:

1
2
h1 { color: grey; }
h1 { color: yellow; } /*这条规则会胜出*/

即使存在外部倒入的样式表,在上述相同的情况下,还是主样式表规则胜出