CSS - !important

在 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>

打印本页