我可以覆盖！重要吗？ [复制]答案

【问题标题】：Can I override !important? [duplicate]我可以覆盖！重要吗？ [复制]
【发布时间】：2013-01-05 22:28:12
【问题描述】：

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

background: red !important;

但是当我尝试这样做时：

 background: yellow;

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

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

【问题讨论】：

这就是为什么我们不使用!important kids！你可以用!important覆盖!important。
与另一个 !important 一起使用，但在第一个之后使用，但通常在 95% 的情况下您可以避免使用 !important

标签： html css stylesheet

【解决方案1】：

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

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

Firefox解析器中的这段代码sn-p将解释how it works：

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

输出是

【讨论】：

@teresko: +1, !important 声明不会改变特异性，而是优先于“普通”声明
根据链接的文章，这是不正确的。我引用，“附加CSS属性值的！重要值是自动获胜。它甚至会覆盖标记中的内联样式。”。 - 我只是在扮演魔鬼代言人 - 我现在要测试一下。和 NullPointer + 文章至少对 Chrome + Windows 是正确的。 jsfiddle.net/rlemon/J7HyR 看这里。
从可靠和/或官方来源寻找答案。并且该 firefox 源代码作为官方来源看起来不错，答案还可以，我现在明白了
我不知道它是用 c 写的 :)

【解决方案2】：

如w3 spec 中所述，!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 应用于它。我会让你来评判一个练习的好坏ಠ_ಠ

不过有no overriding inline !important。

【讨论】：

【解决方案3】：

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

【讨论】：