26

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

background: red !important;

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

 background: yellow;

私が望むように、それはまだその1つのフィールドの黄色ではなく赤だけを示しています(私は外部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;}

出力は

ここに画像の説明を入力

jsフィドル

于 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 に答える