!important

对层叠的影响

当涉及重要声明时，层叠源和层级顺序是反转的。如果没有重要标志，作者样式表中的声明会覆盖用户样式表中的声明，而用户样式表中的声明又会覆盖用户代理默认样式表中的声明。

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

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

有什么比重要声明优先级更高吗？有，过渡。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 不属于特异性确定的一部分，但它与之相关。重要声明会覆盖来自相同来源和层叠层的所有其他声明。

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

p {
  color: red !important;
}

此示例显示了一个选择器过度指定的情况。无论选择器特异性匹配普通声明的程度有多高，来自相同来源和层叠层的重要声明始终具有优先级。在这种情况下，段落将始终是红色。

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

#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

在这种情况下，选择器特异性很重要。只有当选择器具有相同的特异性时，源顺序才重要。

对简写属性的影响

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

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 标志不会作为自定义属性值的一部分传递给 var() 函数。

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

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

在此示例中，段落将是红色，而不是蓝色，因为自定义属性值赋值是重要的。引用块将是紫色，因为紫色的普通声明在红色的普通声明之后。

最佳实践

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

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

如果您需要覆盖包含重要声明的外部样式表，请创建一个包含所需覆盖的层叠层，并首先声明该层。

可访问性考虑

用户样式表中的重要样式优先于作者样式表中的重要声明，这意味着向网站样式添加 !important 标志不会阻止有特殊要求的个人用户（例如大字体）通过在自己的用户样式表中添加重要样式来覆盖您的样式。

浏览器兼容性

所有浏览器都支持此功能。

另见

• CSS 特异性
• CSS 层叠