CSS !important

什么是重要的？

这个!importantCSS 中的规则用于增加属性/值的重要性。

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

让我们看一个例子：

示例

#myid {
background-color: blue;
}

.myclass {
background-color: gray;
}

p {
background-color: red !important;
}

亲自试一试 »

示例解释

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

重要信息！important

覆盖的唯一方法!important规则是包括另一个!important对源代码中具有相同（或更高）特异性的声明进行规则 - 这里问题就开始了！这使得 CSS 代码变得混乱并且调试会很困难，尤其是当你有一个很大的样式表时！

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

示例

#myid {
background-color: blue !important;
}

.myclass {
background-color: gray !important;
}

p {
background-color: red !important;
}

亲自试一试 »

提示：很高兴了解!important规则。您可能会在一些 CSS 源代码中看到它。但是，除非绝对必要，否则不要使用它。

也许 !important 的一两次合理使用

一种使用方式!important是如果您必须覆盖无法以任何其他方式覆盖的样式。如果您正在开发内容管理系统 (CMS) 并且无法编辑 CSS 代码，则可能会出现这种情况。然后你可以设置一些自定义样式来覆盖一些CMS样式。

另一种使用方式!important是：假设您希望页面上的所有按钮都有特殊的外观。此处，按钮的样式采用灰色背景色、白色文本以及一些填充和边框：

示例

.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}

亲自试一试 »

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

示例

.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}

#myDiv a {
color: red;
background-color: yellow;
}

亲自试一试 »

为了"force"所有按钮都具有相同的外观，无论如何，我们可以添加!important按钮属性的规则，如下所示：

示例

.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}

#myDiv a {
color: red;
background-color: yellow;
}

亲自试一试 »