Wie kann ich Inline-Stile mit externem CSS überschreiben?

Ich habe ein Markup, das Inline-Stile verwendet, aber ich habe keinen Zugriff, um dieses Markup zu ändern. Wie überschreibe ich Inline-Stile in einem Dokument nur mit CSS? Ich möchte weder jQuery noch JavaScript verwenden.

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 */
}

Die einzige Möglichkeit, den Inline-Stil zu überschreiben, besteht darin, ein !importantSchlüsselwort neben der CSS-Regel zu verwenden. Das Folgende ist ein Beispiel dafür.

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>

Wichtige Notizen:

• Die Verwendung !importantwird nicht als bewährte Methode angesehen . Daher sollten Sie sowohl den !importantInline-Stil als auch den Inline-Stil vermeiden .

• Durch Hinzufügen des !importantSchlüsselworts zu einer CSS-Regel wird die Regel allen anderen CSS-Regeln für dieses Element vorangestellt.

• Es überschreibt sogar die Inline-Stile aus dem Markup.

• Die einzige Möglichkeit zum Überschreiben besteht darin, eine andere !importantRegel zu verwenden , die entweder mit höherer CSS-Spezifität im CSS oder gleicher CSS-Spezifität später im Code deklariert wird.

• Muss gelesen werden - CSS-Spezifität nach MDN 🔗

inline-stylesin einem Dokument haben die höchste Priorität. Sagen Sie beispielsweise, wenn Sie die Farbe eines divElements in ändern möchten blue, aber eine inline stylemit einer colorEigenschaft festgelegt habenred

<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 */
}

Also, sollte ich jQuery / Javascript verwenden? - Antwort ist NEIN

Wir können element-attrCSS Selector verwenden !important, da dies !importanthier wichtig ist, da es sonst die Inline-Stile nicht außer Kraft setzt.

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

Demo

Hinweis: Die Verwendung von !importantNUR funktioniert hier, aber ich habe den div[style]Selektor verwendet, um speziell divdas style Attribut auszuwählen

Sie können den Inline-Stil mit Ausnahme des Inline- !importantStils leicht überschreiben

so

<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 */
}

aber wenn du hast

<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 */
}

jetzt wird es rednur noch .. und du kannst es nicht überschreiben

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

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

Unten finden Sie den Link für weitere Details: http://css-tricks.com/override-inline-styles-with-css/

wird !importantin der CSS-Eigenschaft verwendet

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

div {
        color: blue !important;
    }