web-dev-qa-db-ja.com

！importantをオーバーライドできますか？

私が試しているのは、このCSSを要素に設定することです。

background: red !important;

しかし、私がこれをやろうとすると：

 background: yellow;

それでも、私が望むように、その1つのフィールドの赤だけが表示され、黄色は表示されません（外部CSSを使用していません）。

私が求めているのは、それをオーバーライドする方法です、それは可能ですか？

htmlcssstylesheet
23
Winter Bash

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

出力は

enter image description here

また、インライン!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;}

出力は

enter image description here

jsFiddle

33
NullPoiиteя

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を適用することです。私はあなたにಠ_ಠである練習がどれほど良いかを判断させます

インライン!importantをオーバーライドすることはありません があります。

15
o.v.

!importantはbackground: yellow;を上書きします!importantの使用は避けてください。 cssの特異性を見てください。 http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

12
Chris Till