CSS 样式级联

前端
CSS
作者

yangjh

发布日期

October 30, 2021

样式表共有三个来源：作者、用户以及用户代理（通常为浏览器）。

  1. 作者指的是源文件的创作者。他可以通过前面叙述的三种方式指定样式表。
  2. 用户。用户可对特定文档指定样式信息，例如：用户指定包含样式信息的文件。
  3. 浏览器。 浏览器肯定会应用默认样式。

CSS 层级为每个样式指定权重。当应用多条规则时，权重最高的规则优先。

层级样式表之所以叫作“层级”，就是规则可以重叠、可以嵌套。这样就产生了新的问题：当规则重叠时，CSS 是如何决定采用哪个规则呢？总的原则是：权重越高的规则优先，相同权重的规则，后面最出现的规则将覆盖前面的规则。如：

p {
  background: orange;
  font-size: 24px;
}
p {
  background: green;
}

浏览器在渲染页面时，会从上至下执行 CSS 规则，这样，上述代码中一开始声明的段落橙色背景，会被随后声明的段落绿色背景取代。

默认情况下，作者创建的规则权重高于用户创建的规则。作者和用户创建的规则优先级别高于浏览器默认规则。

级联顺序

浏览器按照如下规则寻找元素和属性的值：

  1. 为不同媒体类型查找所有应用规则。
  2. 按照重要级别（normal or important）和来源（author, user, or user agent）对规则进行排序。
    1. 浏览器声明的规则
    2. 用户声明的普通规则
    3. 作者声明的普通规则
    4. 作者声明的重要规则
    5. 用户指定的重要规则
  3. 选择符越具体的规则越优先。伪元素和伪类选择符被视为正常元素和类。最后，按照具体程度进行排序，如果两个选择符拥有相同的权重、来源和具体程度，则后出现的规则优先。

!important 规则

!important声明的规则优先级别高于正常方式声明的规则，并且用户申明的!important规则优先于作者指定的!important规则。

选择符优先级别

除了先后顺序外，CSS 还按照选择符的具体程度来决定优先级别，具体计算规则如下：

  1. 计算元素中的 style 属性的值，如果设定了 style 属性，则 a=1。
  2. 计算选择符中的 ID 选择符数量 (= b)。
  3. 计算选择符中的类选择符、属性选择符和伪类选择符数量 (= c)。
  4. 计算元素选择符和伪元素选择符的数量 (= d)
  5. 忽略通配选择符。
  6. 将 a-b-c-d 的值连接在一起就得到选择符的优先级别，该值越大，优先级别越高。

例如：

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

扩展阅读资料

  1. https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#specificity
  2. https://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#cascade
回到顶部