CSS !important

在 CSS 中，!important 规则用于为某个特定的样式声明增加最大的权重。当你在一个样式声明的末尾添加 !important 时，该声明将覆盖任何其他应用于同一元素的、针对同一属性的样式声明，无论其他声明的优先级 (Specificity) 有多高。

语法

!important 必须放在样式声明的分号 ; 之前。

selector {
  property: value !important;
}

示例:

/* 在 style.css 文件中 */
#my-id {
  background-color: blue;
}

.my-class {
  background-color: gray !important;
}

p {
  background-color: red;
}

<p id="my-id" class="my-class" style="background-color: green;">
  这个段落的背景色是什么？
</p>

尽管行内样式 (style="...") 和 ID 选择器 (#my-id) 的优先级都非常高，但由于 .my-class 规则中使用了 !important，所以这个段落的最终背景色将是 灰色 (gray)。

!important 的层叠顺序

!important 规则会改变正常的 CSS 层叠顺序。浏览器的样式应用顺序如下：

1. 浏览器默认样式表中的 !important 声明。
2. 用户样式表中的 !important 声明。
3. 开发者样式表（你的 CSS 文件）中的 !important 声明。
4. 开发者样式表中的正常声明（按优先级计算）。
5. 用户样式表中的正常声明。
6. 浏览器默认样式表中的正常声明。

何时应该（谨慎地）使用 !important？

滥用 !important 是一个非常不好的实践。 它会破坏 CSS 的自然层叠规则，使得代码难以维护和调试。当你开始使用 !important 来解决一个样式问题时，往往会陷入一个“!important 战争”，即用更多的 !important 来覆盖之前的 !important，最终导致样式表一团糟。

然而，在某些特定情况下，使用 !important 是合理甚至是必要的：

1. 覆盖行内样式: 当你无法直接修改 HTML（例如，HTML 是由一个你无法控制的 JavaScript 插件或 CMS 系统生成的），而你需要覆盖元素上的行内样式时，!important 是唯一的方法。

2. 覆盖第三方库或框架的样式: 在使用像 Bootstrap 或 Materialize 这样的 CSS 框架时，有时你需要覆盖它们自带的、优先级很高的样式。在这种情况下，使用 !important 可能是一个直接的解决方案。

3. 功能性或辅助性工具类 (Utility Classes): 在某些 CSS 方法论（如 BEM 或函数式 CSS）中，可能会创建一些原子级的工具类，如 .text-red, .hidden 等。这些类被设计为具有最高优先级，以确保它们无论在哪里使用都能生效。在这种设计体系下，!important 的使用是经过深思熟虑的。

.hidden {
  display: none !important;
}

如何避免使用 !important？

在绝大多数情况下，你可以通过更好的 CSS 实践来避免使用 !important：

1. 提高选择器的优先级: 创建一个比你想要覆盖的规则更具体的选择器。例如，如果一个规则是 .some-class，你可以用 div.some-class 或 .parent-class .some-class 来覆盖它。

2. 利用源码顺序: 如果两个规则的优先级完全相同，后定义的规则会获胜。确保你的自定义样式表在框架的样式表之后被引入。

总结: 把 !important 当作你 CSS 工具箱里的“最后一招”，而不是首选方案。在写下 !important 之前，先问问自己是否真的有必要，或者是否可以通过更优雅的方式来解决问题。