王鹏飞

Blog

Tutorial

About

CSS📚开源

级联

有时候,有多个相同的css规则可以被应用于同一个元素。此时浏览器需要使用级联算法确定最后使用哪一个css规则进行页面渲染。

css是级联样式表(Cascading Stylesheets)级联是解决当多个css规则被同时应用于一个html元素时产生的冲突的一种算法。正因为级联,下面的按钮才会被渲染成蓝色:

<style>
    button {
        color: red
    }
    button {
        color: blue;
    }
<style>

...

<button>This is blue</button>

理解级联的目的,就是为了理解浏览器是如何解决此类冲突的。级联算法分为以下四个模块:

  • 位置和出现的顺序:css规则出现的顺序。
  • 特征性(具体性 Specificity):确定css选择器具有最高匹配权的算法。
  • 来源: css在何时何处生成。它是否是一个浏览器样式或者是浏览器插件添加的样式,又或者是你写的css代码。
  • 重要性:一些css规则具有更高的重要性,特别是包含!important值的规则。

一.位置和出现的顺序

级联规则在解决css规则冲突时,会考虑css规则出现的位置和顺序。

一般一个页面可能包含多种来源不同的css样式。例如<link>标签引入的css文件、<style>标签内部的样式或者是定义在元素style属性中。

但是只需要记住一点,位置越靠后的样式一般具有更高的重要性。假设在html顶部有一个<link>样式,html页面底部也有一个<link>样式,那么底部的<link>样式会在css规则冲突中胜出,因为位置比较靠后。这一点对<style>标签内的样式也适用,但是不适用于元素的style属性,style属性的重要性会比<link><style>标签高。

下面的demo中,按钮显示红色。

前面说过,这个规则不适用于内联样式,内联样式就是通过元素style属性定义的样式。内联样式会覆盖所有其他的css,无论这些css出现的位置和顺序,除非css规则的声明值定义为!important!important比内联样式的重要性更高。

这个规则同样适用于同一个规则块内,同规则的重复设置。下面的代码,背景色将会显示为purple

.ele {
    background: green;
    background: purple;
}

二.特征性(具体性 Specificity)

特征性是一种决定哪个css选择器最具体的算法。这里的最具体的意思,你可以看成哪个css权重最高的意思,选择器权重最高的css规则,在规则冲突中将会胜出。

有了特征性算法,即使有多个不同的css规则具有不同的选择器产生了规则冲突,浏览器也可以决定最后使用哪个css规则去渲染页面。

关于特征性,我将在下一节内容进行讲解。你可以学到特征性是如何计算的。

现在你只需要知道,类选择器的特征性高于类型选择器(标签选择器),ID选择器特征性高于类选择器。

因为ID选择器的特征性比较高,所以下面的按钮将会显示为green

button {
    color: blue;
}

.button {
    color: red;
}

#button {
    color: green;
}

...

<button id="button" class="button">This is a green button</button>

关于特征性,还需要说明的是,特征性可以累加的。如果一个选择器很复杂,因为权重的累加效果,它的最终权重往往会比较高。例如a.my-class.another-class[href]:hover,这样一个选择器,它的css样式一般都会被应用于页面,因为你很难写出比它权重还高的样式了,所以出于这个原因,建议大家在写css时,尽量避免写这种复杂的规则,保持选择器简洁是一个比较好的习惯。

三.来源

css来自不同的地方,也会影响是否会在规则冲突中胜出。关于样式的来源的特征性从低到高如下:

  1. 用户代理样式:也就是浏览器默认样式。
  2. 本地用户样式:一般来源于系统设定,也可以是浏览器插件设定的样式。某些浏览器插件允许用户定义自己的浏览器页面样式。
  3. 开发者定义的css规则:指网页开发者写下的css样式。
  4. 标记为!important的css: 网页开发者写的含!important标记的css样式。
  5. !important的本地用户样式:与2来源相同,不过这个css含有!important标记。
  6. !important的用户代理样式:与1来源相同,不过这个css含有!important标记。

四.重要性

并不是所有的css规则都和其他css按照同样方式计算特征性。

不同种类的css规则重要性从低到高依次如下:

  1. 普通规则:例如font-sizebackground或者color
  2. animation规则。
  3. !important规则。
  4. transition规则。

所以当某些动画规则或者变换规则激活时,它会取代普通规则,进行渲染页面。

附:参考资料

谷歌learn css: The cascade

MDN: Cascade and inheritance

(完)

002 选择器
004 特征性

留言(0


发表评论

邮箱地址不会被公开。*表示必填项