CSS 为什么会重置 !important 的 CSS 值

在本文中，我们将介绍为什么在一些情况下，CSS 中使用 !important 声明的样式却被其他样式所覆盖。CSS 中的 !important 是一种优先级声明，用于指定某个样式的重要性，以确保其优先级高于其他样式。

阅读更多：CSS 教程

CSS 优先级

在了解为什么 !important 的样式可能被覆盖之前，我们首先需要了解 CSS 样式表的优先级规则。CSS 样式优先级主要由以下几个因素决定：

选择器特殊性：选择器特殊性是根据选择器的类型和组合来计算的。例如：
- elements (例如， p) = 1 point
- classes、pseudo-classes、attributes (例如， .class、:hover、[type=”text”]) = 10 points
- ID selectors (例如， #id) = 100 points
- inline styles = 1000 points
样式表顺序：如果多个规则有相同的优先级，则先定义的样式将被后定义的样式覆盖。
!important 声明：样式规则中使用 !important 声明的样式将具有最高的优先级。

这些因素共同决定了 CSS 样式的优先级，当样式冲突时，具有较高优先级的样式将被应用。

!important 被覆盖的原因

尽管 !important 声明通常会使样式具有最高的优先级，但在某些情况下，仍然可能被其他样式所覆盖。以下是几种常见的原因：

选择器特殊性：如果另一个样式具有更高的选择器特殊性，则无论使用了多少个 !important 声明，该样式仍然会被覆盖。例如，如果一个样式选择器中包含了 ID 选择器，而另一个样式只是使用了类选择器，那么 ID 选择器会具有更高的特殊性。

示例1：
“`css
/* 特殊性高于 .box 的样式 */

color: blue !important;
}

<pre data-language=HTML><code class="language-markup line-numbers">示例2：“`css
/* 特殊性高于 #main 的样式 */
body #main {
color: red !important;
}

在这些情况下，无论我们如何使用 !important 声明来强制改变样式，具有更高特殊性的样式优先级仍然会高于 !important 声明。

样式表顺序：如果在样式表中先定义了一个样式，并在后面的位置又定义了具有更高特殊性或 !important 声明的样式，后者将覆盖先定义的样式。

示例3：
“`css
/* 后定义的样式具有更高的特殊性 */
.box {
color: blue;
}

.box {
color: red !important;
}

<pre data-language=HTML><code class="language-markup line-numbers">在这种情况下，尽管第一个样式没有使用 !important 声明，但仍然优先于后一个具有 !important 声明的样式。

3. 继承问题：有些元素的样式是从其父元素继承的。如果父元素的样式中存在与子元素相同的属性，并具有更高的优先级，那么子元素上的 !important 声明将被忽略。

示例4：“`css
/* 父元素样式具有更高的优先级 */
p {
color: red;
}

.child {
color: blue !important;
}

在这种情况下，子元素上的 !important 声明将被忽略，因为父元素的样式具有更高的优先级，子元素会继承父元素的颜色。

总结

虽然 CSS 中的 !important 声明可以为样式提供较高的优先级，但在某些情况下，它的样式被覆盖可能是因为其他样式具有更高的优先级或样式继承的影响。无论我们是否使用了 !important 声明，了解样式表优先级规则以及选择器特殊性是理解为什么某个样式被覆盖的关键。要避免使用 !important 声明过多，以免增加样式冲突和维护难度，而是通过合理设计选择器特殊性来确保样式被正确应用。