彻底弄懂CSS优先级规则

最新推荐文章于 2024-08-11 23:43:12 发布

CS逍遥剑仙

最新推荐文章于 2024-08-11 23:43:12 发布

阅读量806

点赞数

分类专栏： css3 文章标签： css css3

本文链接：https://blog.csdn.net/CSXIAOYAOJIANXIAN/article/details/106439592

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

彻底弄懂CSS优先级规则

文章目录

彻底弄懂CSS优先级规则

Write By CS逍遥剑仙
我的主页: www.csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: sunjianfeng@csxiaoyao.com

当 html 元素拥有多个 css 样式时，浏览器会根据优先级规则计算 css，如果对优先级规则不够熟悉，在实际的开发过程中往往会产生很多困扰，本文总结css的优先级规则。

1. css继承 & 距离

分析下面的demo：

<html id="further">
  <body class="close">
    <h1>Here is a title!</h1>
  </body>
</html>

1.1 css继承距离优先

当DOM元素的指定样式来自继承时，只与DOM树中的距离相关，与选择器的顺序和优先级( id>class 下面会讲到)无关，下方的css会渲染文字为紫色，因为 h1 更靠近 .close，尽管从选择器类型上 #further 优先级更高。

.close {
  color: purple;
}
#further {
  color: green;
}

1.2 非继承的平级css距离无关，取决于加载顺序

当DOM元素的css并非通过继承而来，则会无视DOM树中的距离，若多个css平级，则后面加载的css会覆盖前面的css，下方的css为平级，会根据加载顺序渲染文字为紫色。

body h1 {
  color: green;
}
html h1 {
  color: purple;
}

2. 单个选择器 & 优先级关系链

css常见选择器有7类：

ID 选择器，如 #id{}
类选择器，如 .class{}
属性选择器，如 a[href="csxiaoyao.com"]{}
伪类选择器，如 :hover{}
标签选择器，如 span{}
伪元素选择器，如 ::before{}
通配选择器，如 *{}

此外，再算上内联样式(元素上的style属性)和继承的样式，可以形成优先级关系链：

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通用选择器 > 继承的样式

2.1 demo1 — 优先级关系链应用

根据上述优先级关系链，下方div中文字为黑色。

<div id="content-id" class="content-class" style="color: black">demo</div>
<style>
#content-id {
  color: red;
}
.content-class {
  color: blue;
}
div {
  color: grey;
}
</style>

2.2 demo2 — 基于形式的优先级

在下方的案例中，尽管选择器 *[id="foo"] 通过ID选择了一个元素，但它还是作为一个属性选择器来计算自身的优先级，低于 ID 选择器，所以p标签内的文字为绿色。

<p id="foo">I am a sample text.</p>
<style>
#foo {
  color: green;
}
[id="foo"] {
  color: purple;
}
</style>

3. 选择器组合 & 优先级计算

所有 CSS 的选择符都为上述 7 种基础选择器或组合而成，当多个选择器组合时，首先需要计算 abcd 四个值：

【 a 】是否使用内联样式
【 b 】ID 选择器 出现的次数
【 c 】类选择器、属性选择器 、伪类选择器 出现的总次数
【 d 】标签选择器 、伪元素选择器 出现的总次数

首先比较是否使用内联样式，a 的优先级最高，如果 a 相同，按 b、c、d 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若 b、c、d 都相等，则按加载顺序判定，下例中两个css优先级相同，此时后面的覆盖前面的css，文字颜色为红色。

<div class="outer">
  <span class="inner">test</span>
</div>
<style>
div .inner {
  color: blue;
}
.outer span {
  color: red;
}
</style>

注意：

:not 否定伪类不参与优先级计算

4. !important 强行改变优先级

!important 是一种强制改变css优先级的方法，它拥有最高优先级，若同时多个css有 !important，则再根据上述规则判断优先级。下例是一种常见的场景：由于元素使用了选择器中优先级最高的内联样式，无法再通过选择器修改颜色，只能使用 !important，此时文字为蓝色。

<div class="foo" style="color: red;">test</div>
<style>
.foo[style*="color: red"] {
  color: blue !important;
}
</style>

注意：

Always 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
Only 只在需要覆盖全站或外部 CSS 的特定页面中使用 !important
Never 永远不要在你的插件中使用 !important
Never 永远不要在全站范围的 CSS 代码中使用 !important