CSS !important 规则

什么是!important

CSS中的 !important 规则用于向属性/值添加比正常值更重要的内容。

事实上，如果你用 !important 规则，它将覆盖该元素上该特定属性的所有以前的样式设置规则！

让我们看一个例子：#CSS !important 规则

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}
</style>
</head>
<body>
<p>这是段落里面的一些文本。</p>
<p class="myclass">这是段落里面的一些文本。</p>
<p id="myid">这是段落里面的一些文本。</p>
</body>
</html>

运行一下

实例解释

在上面的例子中，尽管 ID选择器和 class选择器具有更高的特异性，但这三个段落都将获得红色背景色。因为在!important 规则下，这两种情况下都会被覆盖background color属性。

!important 的重要性

更改一个!important规则样式的唯一方法是包括另一个在源代码中具有相同（或更高）特定性的声明的!important规则。

这个时候问题就来了！这样做会使得CSS代码很混乱，调试也很困难，特别是当你有一个大样式表的时候！

这里我们创建了一个简单的示例。当您查看 CSS 源代码时，不太清楚哪个颜色被认为是最重要的：

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}
</style>
</head>
<body>
<p>这是段落里面的一些文本。</p>
<p class="myclass">这是段落里面的一些文本。</p>
<p id="myid">这是段落里面的一些文本。</p>
</body>
</html>

运行一下

备注：这是很好的了解了!important的规则，您可能会在一些CSS源代码中看到它。但是，除非你必须使用，否则不要使用它。

也许有一两个地方不得不用 !important

一种情况是如果你不得不用!important去改写一个无法通过其他方法改写的样式。比如您使用的是内容管理系统（CMS），并且无法编辑 CSS 代码，则可能会出现这种情况。然后您可以设置一些自定义样式来覆盖一些 CMS 样式。

另一种使用!important的情况是：假设你想要一个页面上所有按钮的特殊外观。在这里，按钮的样式为灰色背景色、白色文本以及一些填充和边框：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
</style>
</head>
<body>
<p>标准按钮: <a class="button" href="/css/css-course.html">CSS 教程</a></p>
<p>标准按钮: <a class="button" href="/html/html-course.html">HTML 教程</a></p>
</body>
</html>

运行一下

如果我们将一个按钮放在另一个具有更高特异性的元素中，它的外观有时会发生变化，并且属性会发生冲突。下面是一个例子：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}
</style>
</head>
<body>
<p>标准按钮: <a class="button" href="/css/css-course.html">CSS 教程</a></p>
<div id="myDiv">
<p>myDiv内部的链接文本: <a href="/html/html-course.html">HTML 教程</a></p>
<p>myDiv内部的链接按钮: <a href="/html/html-course.html" class="button">HTML 教程</a></p>
</div>
</body>
</html>

运行一下

要强制所有按钮在任何情况下都有相同的外观，我们只能在按钮属性上加上 !important 规则，如：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}
</style>
</head>
<body>
<p>标准按钮: <a class="button" href="/css/css-course.html">CSS 教程</a></p>
<div id="myDiv">
<p>myDiv内部的链接文本: <a href="/html/html-course.html">HTML 教程</a></p>
<p>myDiv内部的链接按钮: <a href="/html/html-course.html" class="button">HTML 教程</a></p>
</div>
</body>
</html>

运行一下

CSS !important 规则

什么是!important

实例解释

!important 的重要性

也许有一两个地方不得不用 !important

分类导航