☰

インラインスタイルを外部 CSS で上書きするにはどうすればいいですか? 質問する

tag-icon • tag-icon css
インラインスタイルを外部 CSS で上書きするにはどうすればいいですか? 質問する

インライン スタイルを使用するマークアップがありますが、このマークアップを変更する権限がありません。 CSS のみを使用してドキュメント内のインライン スタイルをオーバーライドするにはどうすればよいですか? jQuery や JavaScript は使用したくありません。

HTML:

<div style="font-size: 18px; color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

CS: ...

div {
   color: blue; 
   /* This Isn't Working */
}

ベストアンサー1

インライン スタイルをオーバーライドする唯一の方法は、!importantCSS ルールの横にキーワードを使用することです。次に例を示します。

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }
<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

重要な注意事項:

  • 使用することは!important良い習慣とはみなされませんしたがって、!importantと インライン スタイルの両方を避ける必要があります。

  • !importantキーワードをCSSルールに追加すると、ルールは他のすべてのCSSルールよりも強制的に優先するその要素に対して。

  • それはインラインスタイルを上書きするマークアップから。

  • 上書きする唯一の方法は別の!importantルールを使用することですCSS 内でより高い CSS 詳細度で宣言されるか、コードの後半で同等の CSS 詳細度で宣言されます。

  • 必読 -MDN による CSS の詳細度 ��

おすすめ記事