it-swarm.com.de

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

Ich habe ein Markup, das Inline-Stile verwendet, aber ich kann dieses Markup nicht ändern. Wie kann ich Inline-Stile in einem Dokument nur mit CSS überschreiben? Ich möchte kein jQuery oder 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 */
}
83
Mr. Alien

Die einzige Möglichkeit, den Inline-Stil zu überschreiben, ist die Verwendung von !important Schlüsselwort neben der CSS-Regel. 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:

  • Mit !important wird nicht als gute Praxis angesehen . Daher sollten Sie beide vermeiden !important und Inline-Stil.

  • Hinzufügen des !important Schlüsselwort für jede CSS-Regel lässt die Regel allen anderen CSS-Regeln für dieses Element vorgehen.

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

  • Die einzige Möglichkeit zum Überschreiben ist die Verwendung eines anderen !important rule , deklariert entweder mit höherer CSS-Spezifität im CSS oder gleicher CSS-Spezifität später im Code.

  • Muss lesen - CSS-Spezifität von MDN ????

152
Rohit Agrawal

inline-styles In einem Dokument hat die höchste Priorität. Nehmen wir beispielsweise an, Sie möchten die Farbe eines div -Elements in blue ändern, haben aber ein inline style Mit einer color -Eigenschaft, die auf red gesetzt ist

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

Soll ich jQuery/Javascript verwenden? - Antwort ist [~ # ~] nein [~ # ~]

Wir können den CSS-Selektor element-attr Mit !important Verwenden. Beachten Sie, dass !important Hier wichtig ist, da sonst die Inline-Stile nicht außer Kraft gesetzt werden.

<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 NUR !important Funktioniert hier, aber ich habe den Selektor div[style] Verwendet, um speziell div mit dem Attribut style auszuwählen

24
Mr. Alien

Sie können den Inline-Stil mit Ausnahme des Inline-Stils !important 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 nur red sein 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/

4
jroi_web