html - 外部ファイルを使用してインライン CSS ルールをオーバーライドするにはどうすればよいですか?

Question

外部スタイルシートファイルを使用してインライン CSS ルールをオーバーライドするにはどうすればよいですか?

これは私のHTMLコードです:

<div class="mydiv" style="background:#000"> lorem ipsom</div>

CSSで背景色を変えたい。これは私のCSSコードです:

.mydiv {background:#f00; color: #000;}

しかし、これは機能していませんが、私はこれが可能です。

Internet Explorer の背景色を変更する方法はありますか?

score 6 · Accepted Answer

インラインスタイルは、どのルールセットよりも特異性が高いものとして扱われます。

オーバーライドする唯一の方法は、要素で変更するか、ルールを使用する!importantことです。

!importantルールはソリューションの大ハンマーであり、一度しか機能しません (もう一度オーバーライドしたい場合は、行き詰まります。二重の !important ルールなどはありません)。スタイルシート) が最適なオプションです。

本当に使用したい場合!important、構文は次のとおりです。

.mydiv {
    background:#f00 !important;
    color: #000;
}

score 6 · Accepted Answer

これは非常に簡単です。!importantルールスタイルの後に使用します。次に例を示します。

.mydiv {background:#f00 !important; color: #000;}

score 1 · Accepted Answer

これにはを使用し!importantます。他の CSS をオーバーライドします。次のコードを試してください。

.mydiv {background:#f00 !important; color: #000;}

score 0 · Accepted Answer

これを使って：

.mydiv {
     background: #f00 !important;
     /* This will increase the rule score */
     color: #000;
}

score -1 · Accepted Answer

CSS 属性セレクターを使用できます。

 <style>
     div[style] {
        background: blue !important;
     }
 </style>

 <div style="background: red;">
     The inline styles.
 </div>

5 に答える 5