26

我正在尝试在元素上设置此 CSS：

background: red !important;

但是当我尝试这样做时：

 background: yellow;

它仍然只显示红色而不是我希望的那个字段的黄色（我没有使用外部 CSS）。

我要问的是如何覆盖它，有可能吗？

4

3 回答 3

40

Ans is YES !important可以被覆盖，但你不能!important被普通声明覆盖。它必须比所有其他声明具有更高的特异性。

然而，它可以被更高的特异性!important声明覆盖。

Firefox 解析器中的这段代码将解释它是如何工作的：

if (HasImportantBit(aPropID)) {
  // When parsing a declaration block, an !important declaration
  // is not overwritten by an ordinary declaration of the same
  // property later in the block.  However, CSSOM manipulations
  // come through here too, and in that case we do want to
  // overwrite the property.
  if (!aOverrideImportant) {
    aFromBlock.ClearLonghandProperty(aPropID);
    return PR_FALSE;
  }
  changed = PR_TRUE;
  ClearImportantBit(aPropID);
}

好读

这是一个展示如何覆盖 CSS 的示例

HTML

<div id="hola" class="hola"></div>

CSS

div { height: 100px; width: 100px; }
div { background-color: green !important; }
.hola{    background-color:red !important; }
#hola{    background-color:pink !important;}

输出将是

在此处输入图像描述

我们也不能覆盖内联!important

HTML

<div id="demo" class="demo" style="background-color:yellow !important;"></div>

CSS

div { height: 100px; width: 100px; }
div { background-color: green !important; }
.demo{    background-color:red !important; }
#demo{    background-color:pink !important;}

输出是

在此处输入图像描述

jsFiddle

于 2013-01-22T16:07:56.220 回答
15

如w3 规范中所述，!important声明不会改变特殊性，而是优先于“正常”声明。实际上，此类声明仅在它们之间“竞争” - 因此，您可以用另一个!important更高特异性的声明覆盖您的声明：

/*
 these below are all higher-specificity selectors and, if both 
 rules are applicable to the same element, background colour
 will be set to "yellow":
 */
.some-class.some-other-class, div.some-class, #some-id {background: yellow !important;}
.some-class {background: red !important;}

还需要考虑声明顺序——如果它们的选择器具有相同的特异性，则 CSS 中更靠后的声明将优先于之前的声明。

一个值得注意的情况是它与内联声明发生冲突。违反直觉（但完全符合规范），!important价值将排在首位！这意味着如果你有

<style>
  #secret-container {display:none !important;}
</style>
<script>
  $('#secret-container').show();//using jQuery etc.
</script>
<div id="secret-container">...</div>

有问题的 div 将保持隐藏状态！让内联规则优先于内联规则的唯一方法!important是，也适用!important于它。我会让你来评判这种做法有多好ಠ_ಠ</p>

虽然没有压倒一切的内联!important。

于 2013-01-22T20:33:41.697 回答
12

!important将覆盖background: yellow;尽量避免使用!important. 看看 css 的特殊性。http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2013-01-22T16:08:23.563 回答