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;
}
