不理解CSS中的!important关键字

Question

我需要一些帮助来弄清楚 CSS 中的

!important

关键字如何工作。

.button {
  font-size: 20px;
  color: white;
  background-color: green;
}

.div1 {
  background-color: blue;
}

#nav.pullright {
  background-color: red !important;
  font-size: 30px !important;
}

.div2 {
  background-color: yellow;
}

<div class="div1">
  I am on top
</div>
<button id="nav" class="pullright">
   No,no,no,I am on Top
</button>

我的问题是为什么“我在上面”的背景颜色是蓝色？为什么

#nav

和

.pullright 

背景颜色是蓝色？ 我对

!important

关键字的工作原理感到困惑。 我认为 [#nav .pullright] 应该是红色的，因为 ID 和类属性更具体。

我是客户端编码的新手，欢迎任何和所有答案。

Answer 1

首先，请注意，您的 HTML 中不存在

.button

和

.div2

。

我的问题是为什么“我在上面”的背景颜色是蓝色？

这就是

.div1

元素。它的背景是蓝色的，因为

.div1 {background-color: blue}

为什么

#nav

和

.pullright

背景颜色是蓝色？

#nav

和

.pullright

是相同的元素：

#nav.pullright

。

该元素的背景不是蓝色，而是红色。因为

#nav.pullright {background-color: red !important}

所以是红色的。事实上，你根本不需要那个

!important

规则。

通常，如果可以的话，建议避免在 CSS 中使用像

#nav

和

!important

标志这样的 ID 选择器。两者都使得以后很难推翻CSS，即使在小网站上你也会做很多事情。请参阅：https://cssguidelin.es/#specificity

这是对代码的重写，删除了未使用的 CSS，并通过删除 ID 选择器和 !important 标志来减少

特异性

：

.div1 {
  background-color: blue;
}

.pullright {
  background-color: red;
  font-size: 30px;
}

<div class="div1">
  I am on top
</div>
<button id="nav" class="pullright">
   No,no,no,I am on Top
</button>