!important

一个 ! 分隔符后跟 important 关键字将声明标记为重要。!important 标志会更改在层叠中选择声明的规则。未标记为重要的声明称为普通声明。

要将声明标记为重要，请在声明中的值之后添加 重要标志 (!important)。虽然在分隔符和关键字之间允许使用空格，但通常将标志写为 !important 而不带任何空格。

css

selector {
  property: value; /* normal declaration */
  property: value !important; /* important declaration (preferred) */
  property: value ! important; /* important declaration (not preferred) */
}

!important 出现在属性值对声明的值之后，前面至少有一个空格。重要标志必须是声明中的最后一个标记。换句话说，在标志和声明的结束分号之间可以有空格和注释，但不能有其他内容。

对级联的影响

在重要声明方面，层叠来源和层级顺序会反转。如果没有重要标志，则作者样式表中的声明会覆盖用户样式表中的声明，后者会覆盖用户代理默认样式表中的声明。

当声明很重要时，优先级顺序会反转。用户代理样式表中标记为重要的声明会覆盖用户样式表中的所有重要声明。类似地，用户样式表中的所有重要声明都覆盖作者样式表中的所有重要声明。最后，所有重要声明都优先于所有动画。

注意：所有重要声明都优先于所有动画。!important 在 @keyframes 动画声明中无效。

反转重要声明的优先级顺序可确保有特殊需求的用户（例如个性化颜色方案或大字体）能够在需要时通过将其用户样式表中的一些声明标记为重要来覆盖作者样式。它还保证恶意扩展程序无法覆盖重要的用户代理样式，这可能会破坏功能或对安全性产生负面影响。

是否有任何内容优先于重要声明？是的，过渡。CSS 过渡是一种控制属性从一个值更改为另一个值的速率的方法。在从一个值过渡到另一个值时，属性将不匹配特定的重要声明。

css

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

在此示例中，color 和 background-color 属性将在两秒钟内过渡到悬停状态。即使默认状态是普通声明，悬停状态是 !important 声明，过渡也会发生。

级联层

在样式表的三种来源（作者、用户和用户代理）中的每一个来源中，非分层样式中的普通声明都会覆盖分层样式声明，其中最后声明的优先级高于之前声明的层。重要声明会反转优先级顺序：第一层中的重要声明优先于下一层中的重要声明，依此类推。此外，所有重要声明都优先于在任何层之外进行的重要声明。

内联样式

内联样式是使用 style 属性定义的样式。它们也可以是普通或重要的。内联普通样式优先于所有普通声明，无论来源如何。内联重要样式优先于所有其他重要作者样式，无论层级如何，但来自用户或用户代理的样式表和过渡会覆盖它们。

!important 和特异性

虽然 !important 不是确定特异性的一部分，但它与之相关。重要声明会覆盖来自相同来源和层叠层的所有其他声明。

css

#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}

此示例展示了一个过度指定选择器的案例。无论选择器特异性有多高，只要匹配正常声明，来自相同来源和级联层的 important 声明始终具有优先级。在本例中，段落始终为红色。

当来自相同来源和层级的两个 important 声明应用于同一个元素时，浏览器会选择并使用特异性最高的声明。

css

#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

在本例中，选择器特异性很重要。只有当选择器具有相同特异性时，源顺序才重要。

对简写属性的影响

使用 !important 声明简写属性会将所有子属性设置为 important。以下两个选择器样式块等效。

css

p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}

此示例展示了通常建议避免使用 important 标志的几个原因之一。

对自定义属性的影响

当 !important 标志添加到自定义属性值声明时，它会使值分配变为 important。然后，!important 标志会从自定义属性值中剥离。!important 标志不会作为自定义属性值的一部分传递给 var() 函数。

css

:root {
  --myColor: red !important;
  --myColor: blue;
}
p {
  color: var(--myColor);
}
blockquote {
  color: var(--myColor);
  color: purple;
}

<p>This is a paragraph</p>
<blockquote>This is a blockquote</blockquote>

在此示例中，段落将为红色，而不是蓝色，因为自定义属性值分配为 important。块引用将为紫色，因为紫色正常声明位于红色正常声明之后。

最佳实践

避免使用 !important 来覆盖特异性。当有意为 UI 需求创建 important 声明时，请在 CSS 代码中添加注释，向维护人员解释为什么他们不应该覆盖该功能。

即使需要覆盖无法控制的高特异性样式（例如，使用 id 选择器在第三方插件中声明的样式），也不需要使用 !important。请考虑将第三方样式表脚本导入到命名或匿名层作为您的第一个级联层，而不是使用 !important。只要外部样式不包含 important 声明，您的样式将优先于小部件样式，无论特异性如何。

如果需要覆盖包含 important 声明的外部样式表，请创建一个包含所需覆盖的级联层，并将该层声明为第一个。