インラインスタイルを外部CSSでオーバーライドするにはどうすればよいですか？

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

HTML：

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

CSS：

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

インラインスタイルを上書きする唯一の方法は!important、CSSルールの横にキーワードを使用することです。以下はその例です。

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とインラインスタイルを回避する必要があります。

• !importantCSSルールにキーワードを追加すると、そのエレメントの他のすべてのCSSルールよりもルールが強制的に優先されます。

• マークアップのインラインスタイルもオーバーライドします。

• オーバーライドする唯一の方法!importantは、CSSでより高いCSS固有性を持つか、コードの後半で同じCSS固有性で宣言された別のルールを使用することです。

• 必読-MDNによるCSS固有性

inline-stylesドキュメント内の優先度が最も高いので、たとえば、div要素の色をに変更したいが、プロパティをに設定しblueたinline styleとしcolorますred

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

div {
   color: blue; 
   /* This Won't Work, As Inline Styles Have Color Red And As 
      Inline Styles Have Highest Priority, We Cannot Over Ride 
      The Color Using An Element Selector */
}

それで、jQuery / Javascriptを使用する必要がありますか？-答えはNOです

ここでは、element-attrCSSセレクターを使用できます!important。これ!importantは重要です。そうしないと、インラインスタイルを上書きしません。

<div style="font-size: 30px; color: red;">
    This is a test to see whether the inline styles can be over ridden with CSS?
</div>

div[style] {
   font-size: 12px !important;
   color: blue !important;
}

デモ

注：!importantここではONLYを使用div[style]できますdivが、セレクターを使用 して特定のstyle 属性を選択しています

インラインスタイル以外のインライン!importantスタイルを簡単にオーバーライドできます。

そう

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

div {
   color: blue !important; 
   /* This will  Work */
}

しかし、あなたが持っているなら

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

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

今それはred..だけであり、それを上書きすることはできません

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

div[style] {
   background: yellow !important;
}

詳細については、以下のリンクをご覧ください。http： //css-tricks.com/override-inline-styles-with-css/

!importantCSSプロパティで 使用

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

div {
        color: blue !important;
    }