CSS !important：工作原理与使用场景

!important 的作用

在值的后面加上 !important，这条声明就会胜过同一元素上同一属性的所有普通声明。选择器的优先级和源码顺序都不再起作用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>!important</title>
  <style>
    #intro { color: #2563eb; }           /* ID: very specific */
    .warning { color: #f59e0b !important; } /* class, but important */
  </style>
</head>
<body>
  <p id="intro" class="warning">Amber: !important beats the ID selector.</p>
</body>
</html>

没有 !important 的话，ID 选择器会胜出，文字会是蓝色。在编辑器里删掉 !important 就能看到。

语法

selector {
  property: value !important;
}

它写在值的后面、分号的前面。它只作用于这一条声明，而不是整条规则。它也可以用在简写属性中（margin: 0 !important; 让四个方向都变成 important），以及 style 属性中。

谁胜过谁

对于页面作者编写的样式，从弱到强依次是：

在同一个等级内，先比优先级，再比声明出现的顺序：后出现的胜出。

这是 !important 在日常中唯一正当的用法：覆盖一个你无法修改的内联样式，比如第三方小组件写入的样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Beat inline</title>
  <style>
    .widget { background: #16a34a !important; }
    .widget-plain { background: #16a34a; }
    div { color: white; padding: 10px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="widget" style="background: #2563eb;">Green: stylesheet !important beats inline.</div>
  <div class="widget-plain" style="background: #2563eb;">Blue: a normal rule loses to inline.</div>
</body>
</html>

两条声明都是 !important 时

!important 对上 !important，就回到常规规则：优先级高的胜出，优先级相同时后写的声明胜出。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Two important</title>
  <style>
    p { padding: 8px; color: white; }
    .card p { background: #2563eb !important; }  /* (0,1,1) */
    p.note { background: #f59e0b !important; }  /* (0,1,1), later */
    p { background: #16a34a !important; }       /* (0,0,1) */
  </style>
</head>
<body>
  <div class="card"><p class="note">Amber: same specificity, later rule.</p></div>
  <p>Green: only the type rule matches.</p>
</body>
</html>

!important 就是这样不断升级的：一旦某条规则用了它，要覆盖这条规则的规则也必须用它，优先级又开始一路攀升。

一张表看懂 CSS 优先级

优先级就是选择器的权重。数三个数字：

先比较 A 列；只有相同时才看 B 列，然后是 C 列。所以 #nav a（1,0,1）胜过 .menu .item .link a（0,3,1）：一个 ID 的分量超过任意数量的类。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #nav a { color: #16a34a; }                /* (1,0,1) wins */
    .menu .item .link a { color: #f59e0b; }  /* (0,3,1) */
    a { color: #2563eb; }                     /* (0,0,1) */
  </style>
</head>
<body>
  <nav id="nav" class="menu">
    <div class="item"><span class="link"><a href="#">Green link</a></span></div>
  </nav>
</body>
</html>

理解了这张表，你就能避免使用 !important：大多数“我的 CSS 不生效”的问题，都是因为别处有一条优先级更高的规则，在开发者工具的 Styles 面板里可以看到你的声明被划掉了。

更干净的替代方案

• 让优先级持平，再依靠顺序。 在库的样式表之后加载你自己的样式表，并使用一个至少同样具体的选择器。
• 用 :where() 降低另一条规则的优先级。 :where() 里面的一切都算作零，所以用它编写的基础样式很容易被覆盖。
• 用 CSS 变量作为入口。 一个读取 var(--btn-bg) 的组件不必和它的选择器较劲就能换主题。参见 CSS 变量。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>where</title>
  <style>
    /* base styles with zero specificity */
    :where(#app .panel) { background: #e5e7eb; padding: 10px; }

    /* a plain class is enough to override */
    .highlight { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel">Gray base style.</div>
    <div class="panel highlight">Amber, no !important needed.</div>
  </div>
</body>
</html>

用 JavaScript 设置 !important

element.style.color = 'red !important' 是行不通的：这个值无效，会被忽略。请使用带第三个参数的 setProperty：

el.style.setProperty('color', '#f59e0b', 'important');

常见错误

• 写错了位置。 color: !important red; 是无效的；它要写在值的后面。
• 在 @keyframes 里使用。 关键帧里标记了 !important 的声明会被忽略。
• 每个冲突都用它来解决。 应该在开发者工具里找到胜出的那条规则，让你的优先级与它持平，或者降低它的优先级。
• 以为它会影响另一个属性。 color: red !important 对 background 毫无作用。
• 忘了内联的 !important 会胜过你的。 页面样式表中没有任何规则能覆盖 style="color: red !important"；只能修改这个属性本身，比如用 JavaScript。