在 CSS 中，表示法 !important 是一种特殊方式，用于使 CSS 声明优先于适用于同一选择器的其他竞争规则。此声明用于为 CSS 规则提供更高的特异性和优先级，这意味着它将覆盖其他冲突的样式，即使这些样式具有更高的特异性或稍后在样式表中定义。
- 感叹号 （！） 后跟单词 important（不带空格）告诉浏览器将该样式置于所有其他样式之上。
- 此规则更改了浏览器选择要遵循的规则的方式。没有这种特别注意的规则称为正常。
- 至关重要的是，！important 是声明中的最后一个元素，就在终止分号之前。当涉及到允许包含多个关键字的值的属性（例如字体属性）时，此位置尤为重要。
语法
selector {
property: value !important;
}
CSS ！important - 基本示例
以下示例演示了如何使用 ！important，其中我们通过使用新样式重新定义 .box 类来覆盖基本样式：
<html>
<head>
<style>
/* Base styles */
.box {
width: 200px;
height: 200px;
background-color: red;
margin: 10px;
}
/* Override styles using !important */
.box {
background-color: blue !important;
margin: 20px !important;
}
</style>
</head>
<body>
<div class="box"><h2>DEMO BOX<h2></div>
</body>
</html>
- 请记住，虽然 ！important 在特定情况下可能很方便，但最好只在真正需要时才使用它。
- 过于频繁地使用 ！important 会使代码更难管理和调试。
- 依靠适当的 CSS 特异性和结构来防止过度使用 ！important 是一种很好的做法。
CSS ！important - 对级联的影响
级联是一种算法，用于定义用户代理如何组合来自不同来源的属性值。你可以在这里阅读更多关于这方面的信息。
标记为 ！important 的规则或属性比标记为 ！important 的规则或属性被赋予更高的权重。如果两个规则适用于一个元素，其中一个被标记为 ！important，则重要的规则优先。
有三个来源：作者、读者和用户代理。您可以 在此处阅读 有关此内容的更多信息。
在正常情况下，作者的风格胜过读者的风格。重要的读者样式比任何其他样式都强，包括重要的作者样式。作者样式和读者样式都会覆盖用户代理的默认样式。
就声明权重而言，有五个级别需要考虑。按照权重从大到小的顺序，它们是：
- 读者重要声明
- 撰写重要声明
- 编写正常声明
- 读者正常声明
- 用户代理声明
CSS ！important - 过渡
但是，过渡是例外。CSS 转换控制属性更改的速度。在这些转换过程中，属性与特定的重要声明不匹配，因此转换是唯一可以覆盖 ！important 声明的方面。
以下示例演示了 CSS 过渡如何覆盖 ！important 规则，从而在网页上实现流畅且视觉上吸引人的效果。
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
transition: background-color 2s;
}
.box:hover {
background-color: blue !important;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS ！important - 内联样式
内联样式是使用 style 属性直接添加到 HTML 元素的样式。这些样式可以是基本的，也可以是重要的。基本内联样式比其他基本样式更强，无论它们在何处定义。
重要的内联样式比 ！important 站点样式强，但不如用户或浏览器样式强。但是，样式中的特殊过渡可以覆盖重要的内联样式。
以下示例演示了这一点：
<html>
<head>
<style>
p#bright {color: silver;}
p {color: black !important; }
</style>
</head>
<body>
<p style="color:red !important">Welcome to Tutorialspoint!</p>
</body>
</html>
CSS ！重要性和特异性
根据 CSS 规则，如果冲突的声明适用于某个元素，并且它们都具有相同的权重，则应按特定性对它们进行排序，最具体的声明优先。但是，如果属性被声明为重要属性，那么无论选择器特异性与正常声明的匹配程度有多高，来自同一源和级联层的重要声明将始终具有优先级。
当来自同一源和层的两个重要声明适用于同一元素时，浏览器会以最高的特异性选择并使用该声明，如下所示。这里文本的颜色是红色的：
<html>
<head>
<style>
#demo-para p {
color: green !important;
}
p {
color: red !important;
}
</style>
</head>
<body>
<p id="demo-para">Welcome to Tutorialspoint! </p>
<p>A place to find all courses!</p>
</body>
</html>
CSS ！important - 对简写属性的影响
当您将 ！important 与速记属性一起使用时，它也会对其所有单个属性应用重要性。以下示例是相同的。以下示例:
p {
background: red !important;
}
上述样式等同于：
h2 {
font-variant : normal !important;
font-weight : bold !important;
font-size : 15px !important;
font-family : "Times New Roman", Times, Serif !important;
}
CSS ！important - 对自定义属性的影响
当您将 ！important 添加到自定义属性中时，这意味着此值非常重要。但是在设置它之后，！important 部分将从值中删除。important 标志不会作为自定义属性值的一部分传递给 var（） 函数。
以下代码演示了 ！important 对自定义属性的影响：
<html>
<head>
<style>
:root {
--primary-color: blue !important;
--primary-color: red ;
}
.box {
background-color: var(--primary-color) ;
width: 200px;
height: 200px;
}
p {
color: var(--primary-color);
}
</style>
</head>
<body>
<div class="box"></div>
<p>Welcome to Tutorialspoint! </p>
</body>
</html>
CSS ！important - 覆盖
以下示例演示了 ！important 规则如何覆盖同一属性的另一个 ！important 规则。 它允许您控制 CSS 样式的特异性和优先级。当您运行此程序时，您将看到 <div> 内的文本是红色的，第一个 <span> 内的文本是蓝色的，第二个 <span> 内的文本是绿色的。
<html>
<head>
<title>!important Overrides !important</title>
<style>
.demo-important-text {
color: red !important;
}
.demo-important-text span {
color: blue !important;
}
.demo-important-text span span {
color: green !important;
}
</style>
</head>
<body>
<div class="demo-important-text">
This sentence should be red.
<span>
This sentence should be blue.
<span>
This sentence should be green.
</span>
</span>
</div>
</body>
</html>
