CSS !important

在某个 CSS 声明的值后面加上 !important，这条声明会覆盖同属性其它「不带 !important」的声明（在满足层叠与选择器优先级的前提下）。它优先级很高，但滥用会让样式难以维护，应谨慎使用。

写法

css

.box {
  color: red !important;
  margin: 10px !important;
}

何时会「赢」

同属性、同选择器：后写的覆盖先写的；若其中一条带了 !important，则带 !important 的胜出。
不同选择器：一般情况下，带 !important 的声明会覆盖不带 !important 的声明，即使对方选择器权重更高。若两边都带 !important，则再按选择器权重和顺序比较。

因此 !important 是「强行提高这条声明的优先级」的手段。

为何要少用

难以覆盖：后面想改样式时，可能不得不再写一个 !important，导致恶性循环。
破坏层叠：正常应靠选择器权重和书写顺序控制优先级，!important 会打乱预期。
调试困难：很难一眼看出某样式来自哪条规则、是否被 !important 影响。

适合使用的场景

工具类 / 覆盖第三方样式：例如做通用工具类（.text-red）或覆盖组件库内联样式时，在少数、可控的规则上用 !important 可以接受。
临时排查：快速确认「是不是被其它样式覆盖」时，可临时加 !important 测试，确认后应改为提高选择器权重或调整顺序。

更推荐的做法

提高选择器权重（如多加一个 class、用更具体的选择器）而不是加 !important。
检查书写顺序：同一权重时后写的覆盖先写的。
减少内联样式和过于宽泛的选择器，避免不得不靠 !important 救场。

小结

!important 会显著提高该声明的优先级，易覆盖其它样式。
应谨慎使用，优先通过选择器权重和顺序解决问题。
工具类或覆盖第三方样式时可酌情使用，并尽量限制在少数规则内。

下一节是 CSS 总结。