CSS样式特异性5层次详解

news2024/10/6 20:41:12

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

293篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

在 CSS 中，特异性（Specificity）是一个决定页面中哪些样式规则应用到特定元素的规则集。当多个规则都适用于同一个元素时，特异性决定了哪个规则将被应用。理解特异性对于编写清晰、可预测的 CSS 代码至关重要。

那我们一起来看看吧。

特异性有 5 个层次，从高到低依次是：

内联样式：直接在 HTML 元素的style属性中声明的样式，特异性最高。
ID 选择器：使用#定义的，如#header。
类选择器、属性选择器和伪类：使用.定义的类选择器，如.highlight，使用[attribute]定义的属性选择器，如[type="text"]，以及伪类，如:hover。
元素和伪元素选择器：元素选择器，如p，div，以及伪元素选择器，如::before。
通用选择器（*）：*。

也就是一个优先级公式：内联样式 > ID 选择器 > 类选择器、伪类、属性选择器 > 元素选择器、伪元素选择器 > 通用选择器（*）

假设我们有以下 CSS 规则：

p {
  color: blue;
}

#main p {
  color: green;
}

p.highlight {
  color: red;
}

效果如下：

也就是说，如果一个<p>元素同时拥有id="main"和class="highlight"，那么它的文本颜色将会是绿色，因为 ID 选择器的特异性高于元元素和类选择器。

特异性是通过计算每个选择器的层次值来确定的。具体来说，特异性的计算规则如下：

如果有多个选择器，它们的特异性值会相加。

例子：以下 CSS 规则，如注释说明，所以文字显示的是，蓝色。

/* 特异性：101 */
#content p {
  color: green;
}

/* 特异性：11 */
p.highlight {
  color: red;
}

<div class="content">
  <!-- 特异性 1000 -->
  <p class="highlight" style="color: blue">This is text.</p>
</div>

特异性是 CSS 中一个复杂但功能强大的概念。掌握了特异性，你就可以更精确地控制页面的样式，避免许多常见的样式冲突问题。

那如果两个或更多具有相同特异性的样式规则应用于同一个元素时，是什么规则呢？遵循以下 2 点：

后者优先：如果有多个相同特异性的规则，最后一个出现的规则会生效。
重要的是优先：如果使用了!important，则该规则会覆盖其他所有非!important规则，它的特异值可以理解为是 10000。比如，上面 css 的最后我们再加入一个规则。

/* 特异性：10001 = p标签是1 + important是10000 */
p {
  background-color: #13dada;
  font-size: 20px;
  color: #fff !important;
}

效果就会变成我们新写的样式了。

虽然!important在 CSS 中是一个强大的声明，它允许你强制浏览器忽略掉其他所有 CSS 规则，使得使用!important的样式规则具有最高优先级。然而，!important也被认为是一种万不得已的糟糕做法...

为什么不建议用 important？

因为它违背了 CSS 的层叠性（Cascading）和特异性原则，使得样式表难以维护和理解。以下是一些可能会考虑使用!important的情况：

临时覆盖：在紧急情况下快速修复问题，尤其是当你没有时间或权限去修改更具体的选择器或结构时。
第三方样式覆盖：有时你可能需要覆盖第三方库或框架的样式，而这些样式往往使用了非常具体的选择器。在这种情况下，使用!important可能是一个折衷方案。
交互状态：在某些情况下，为了确保元素在特定交互状态下（如:hover, :active, :focus）的样式表现，开发者可能会使用!important。
JavaScript 生成的样式：如果 JavaScript 动态生成的样式与 CSS 有冲突，有时候不得不使用!important来确保样式被应用。
特定类型的修复：在一些罕见的情况下，可能需要修复浏览器的特定 bug 或兼容性问题，这时可能会用到!important。