与普通属性相比，CSS 中的此属性用于赋予更高的重要性。该!important手段“这是重要的”。此规则提供了一种在CSS中制作级联的方法。
如果我们将此属性应用于文本，则该文本的优先级高于其他优先级。建议不要在您的程序中使用此CSS属性，除非它非常需要。这是因为更多地使用这个属性会导致很多意想不到的行为。
如果使用此属性定义规则，它将拒绝正常关注，即后来使用的规则覆盖以前的规则。如果我们使用多个标记为!important 的声明，那么正常的级联会再次接管它。这意味着新标记的!important将取代之前的。
它增加了 CSS 属性的优先级并忽略了覆盖的属性。
element {
font-size: 14px !important;
color: blue !important;
...
}<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white ;
}
H1 {
color:blue !important;
}
body {
background-color:lightblue !important;
text-align:center;
background-color:yellow;
}
</style>
</head>
<body>
<h1>你好世界。</h1>
<h1>欢迎来到 RocSchool.com。这是<i>!important</i>属性的一个例子。 </h1>
<p></p>
</body>
</html>在上面的例子中，我们可以看到 body 的背景颜色不是粉红色，而是浅蓝色，因为在 body 标签中，!important应用在浅蓝色背景颜色之后。
让我们再举一个这个属性的例子来更清楚地理解它。
在这个例子中，我们在文本的边框上应用!important属性。尽管有其他声明，h1标题的边框颜色将保持红色。尽管有其他声明，标题h2的颜色和边框颜色将保持绿色和紫色。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
text-align: center;
}
h1 {
border-color: red !important;
border: 5px green solid;
border-color: black;
}
h2{
color: green !important;
color: red;
border-color:violet !important;
border: 5px green solid;
}
</style>
</head>
<body>
<h1>你好世界 ：） ：）</h1>
<h2>欢迎来到 RocSchool.com</h2>
</body>
</html>