我可以覆盖 !important 吗？ [复制]

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

background: red !important;   

但是当我尝试这样做时：

 background: yellow;  

它仍然只显示红色而不是黄色，正如我希望的那样（我没有使用外部CSS）。

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

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

然而它可以被更高的特异性覆盖!important宣言。

Firefox 解析器中的这段代码片段将解释怎么运行的 http://mxr.mozilla.org/mozilla2.0/source/layout/style/nsCSSDataBlock.cpp#576:

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 特异性的细节 http://css-tricks.com/specifics-on-css-specificity/
• CSS 特异性：你应该知道的事情 http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

这是一个展示如何覆盖 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;}

输出是