欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

彻底弄懂CSS优先级规则

程序员文章站 2022-03-28 20:25:51
...

彻底弄懂CSS优先级规则

文章目录

Write By CS逍遥剑仙
我的主页: www.csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: aaa@qq.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>

注意：

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

彻底弄懂CSS优先级规则

相关标签： css3 css

上一篇： 为什么给我的女神送花这么难？？（Transform 和z-index的爱恨情仇）

下一篇： “创客北京2019”创新创业大赛怀柔赛区 颁奖典礼圆满落幕

推荐阅读