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的唯一方法是在源代码中具有相同（或更高）特异性的声明中包含另一条规则 - 问题从这里开始！ 这使得 CSS 代码令人困惑，调试将很困难，尤其是在 你有一个大样式表！

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

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

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

p {  background-color: red !important;}

尝试一下 »

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

两钟合理使用！important的方法

一种使用方法是，如果必须覆盖 一种无法以任何其他方式覆盖的样式。这可能是如果你是 在内容管理系统 （CMS） 上工作，无法编辑 CSS 代码。 然后，您可以设置一些自定义样式来覆盖某些CMS样式。

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

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

尝试一下 »