前端必知必会-CSS!important 规则

---

CSS !important 规则

什么是 !important？
CSS 中的 !important 规则用于为属性/值添加比平常更多的重要性。

事实上，如果您使用 !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;
}

为了“强制”所有按钮无论如何都具有相同的外观，我们可以将 !important 规则添加到按钮的属性中，如下所示：

示例

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

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

---

总结

本文介绍了CSS!important 规则的使用，如有问题欢迎私信和评论