前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >彻底弄懂CSS优先级规则

彻底弄懂CSS优先级规则

原创
作者头像
CS逍遥剑仙
发布2020-03-26 03:13:00
1.5K0
发布2020-03-26 03:13:00
举报
文章被收录于专栏:禅林阆苑

彻底弄懂CSS优先级规则

TOC

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

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

1. css继承 & 距离

分析下面的demo:

代码语言:txt
复制
<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 优先级更高。

代码语言:txt
复制
.close {
  color: purple;
}
#further {
  color: green;
}

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

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

代码语言:txt
复制
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中文字为黑色。

代码语言:txt
复制
<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标签内的文字为绿色。

代码语言:txt
复制
<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 相同,按 bcd 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若 bcd 都相等,则按加载顺序判定,下例中两个css优先级相同,此时后面的覆盖前面的css,文字颜色为红色。

代码语言:txt
复制
<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,此时文字为蓝色。

代码语言:txt
复制
<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

sign.jpg
sign.jpg

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 彻底弄懂CSS优先级规则
    • 1. css继承 & 距离
      • 1.1 css继承距离优先
      • 1.2 非继承的平级css距离无关,取决于加载顺序
    • 2. 单个选择器 & 优先级关系链
      • 2.1 demo1 — 优先级关系链应用
      • 2.2 demo2 — 基于形式的优先级
    • 3. 选择器组合 & 优先级计算
      • 4. !important 强行改变优先级
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档