当我们尝试查看的级联样式表 (CSS) 时，我们会在代码中注意到一条声明 !important 的行。
这样的术语影响样式表中的处理优先级。
层叠样式表是层叠的，这意味着它们按特定顺序排列。
样式通常按照浏览器读取它们的顺序应用。
应用第一种样式，然后应用第二种样式，依此类推。
因此，如果样式出现在样式表的顶部，然后在文件中较低，则该样式的第二个场景是在后续实例中应用的场景，而不是第一个。
实际上，如果两种样式定义相同的事物（这意味着它们具有相同级别的特异性），则将使用列出的最后一个。
例如，让我们想象一个样式表包含以下样式：
p {
color: green;
}
p {
color: black;
}
虽然绿色应用于第一段，但段落文本将呈现为黑色。
这样做的原因是“黑色”值是第二个应用。
因为 CSS 是从上到下阅读的，所以结论是“黑色”，所以它赢了。
下面，我们将讨论 !important 规则如何改变优先级。
如何在 CSS 中应用 !important 规则
CSS !important 规则增加了比任何其他属性更多的权限。
在 CSS 中，!important 的意思是“这很重要”。
必须忽略所有后续规则，并应用 !important 规则。
此规则必须设置在行 tail，直接在分号之前。
p {
color: green !important;
}
然而，为了平衡， !important 声明优先于普通声明。
作者和用户的样式表都可以包含 !important 声明，并且用户 !important 规则覆盖作者 !important 规则。
此功能通过提供特殊要求（大字体、颜色组合等）和对演示文稿的控制来提高文档的可访问性。
将速记属性（例如颜色）声明为 !important 等同于将其所有子属性声明为 !important。
因此，它用于覆盖先前在其他样式源中表示的样式，以生成特定的设计。
让我们看一个例子，以获得清晰的图像。
使用 !important 规则的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background-color: #1c87c9 !important;
background-color: #ffcc00;
}
h2 {
color: #8ebf42;
}
h2 {
color: #eeeeee !important;
}
</style>
</head>
<body>
<h2>onitroad</h2>
<p>
onitroad provides free learning materials for programming languages like HTML, CSS, Java Script, PHP, etc.
</p>
</body>
</html>
在给定的示例中，<body> 的背景颜色是蓝色而不是黄色，标题是灰色而不是绿色。
这是因为应用了 !important 规则。
其中使用 !important 规则
在某些情况下，可以使用 !important 规则。
这些是以下情况：
- 覆盖用户样式表中的样式
这就是 !important 在第一点的目的：给用户一个机会来覆盖的样式。
屏幕阅读器、AD拦截器等便利工具经常使用它。
- 覆盖第 3 方代码和内联样式
作为开发人员，我们应该渴望尽可能多地控制代码，但在某些情况下，双手被束缚，我们只需要处理存在的任何内容。
谨慎使用 !important。
- 实用程序类
实用程序类可能是一个很好的例子。
让我们考虑一下按钮。
如果你的上有一个像 .button 这样的类名，无论你把它放在什么元素上，你都希望该元素看起来像一个按钮：精确的字体、圆角、特殊的背景和边框，任何东西。
我们可以尝试以下操作。
添加按钮的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.button {
background: #1c87c9;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
border: 1px solid #666;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" class="button">BUTTON</a>
</body>
</html>
一旦该元素有一些其他具有更高特异性的选择器影响它，我们可能会遇到如下样式问题。
添加没有 !important 规则的按钮的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#mybutton a {
border-bottom: 3px dashed #8ebf42;
}
.button {
background: #1c87c9;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
border: 3px solid #666;
text-decoration: none;
}
</style>
</head>
<body>
<section id="mybutton">
<p>This is a
<a href="#" class="button">BUTTON</a>
</p>
</section>
</body>
</html>
我们可以看到我们有特定设计的按钮有一个绿色的虚线底部边框，这不是我们所期望的。
设置具有更高特异性的 CSS 选择器很简单，而且通常是完全有效的。
为了使按钮类不易更改，请将 !important 规则放在值上。
这是应用带有 !important 规则的按钮的示例。
使用 !important 规则添加按钮的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#mybutton a {
border-bottom: 3px dashed #8ebf42;
}
.button {
background: #1c87c9;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
border: 3px solid #666 !important;
text-decoration: none;
}
</style>
</head>
<body>
<section id="mybutton">
<p>This is a
<a href="#" class="button">BUTTON</a>
</p>
</section>
</body>
</html>
用户样式表
该指令还用于帮助网页用户处理使他们难以使用或者阅读页面的样式表。
如果有人定义了用于查看网页的样式表，则该样式表将被页面作者的样式表覆盖。
如果用户标记的样式类似于 !important，则该样式会覆盖网页作者的样式表，即使作者选择了类似 !important 的规则。
这种结构对于需要以某种方式设置样式的用户很有用。
例如，视障读者可能需要增加默认字体大小。
通过在我们构建的页面中谨慎使用 !important 指令，我们可以提供用户的个性化需求。
不建议经常为 CSS 使用 !important 规则，因为唯一可以覆盖 !important 声明的是另一个 !important 声明。
通过使用一次，我们可能最终会得到一个充满 !important 规则的 CSS 文件，这并不好。
何时使用 !important 规则
在测试和调试时，!important 声明是有效的。
如果我们不确定为什么没有应用某个样式，并且我们认为这可能是特定性冲突，请将 !important 声明添加到样式中以查看是否可以修复它。
如果是，请更改选择器的顺序并从生产代码中删除 !important 指令。
如果我们过于依赖 !important 语句来实现我们想要的样式，我们最终将拥有一个散落着 !important 样式的样式表。
我们将极大地改变 CSS 页面的处理方式。
从长期管理的角度来看，这是一种没有用的懒惰做法。
使用 !important 进行检查，或者在某些情况下，我们只需覆盖作为主题或者模板框架一部分的内联样式。
即使在这些情况下，也要谨慎地使用这种技术，作为替代，编写干净的样式表来尊重级联。