Come posso sovrascrivere gli stili in linea con CSS esterni?

Ho un markup che utilizza stili inline, ma non ho accesso per modificare questo markup. Come si sostituiscono gli stili in linea in un documento utilizzando solo CSS? Non voglio usare jQuery o 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 */
}

L'unico modo per sovrascrivere lo stile in linea è usare la !importantparola chiave accanto alla regola CSS. Di seguito è riportato un esempio.

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>

Note importanti:

• L'utilizzo !importantnon è considerato una buona pratica . Quindi, dovresti evitare sia lo !importantstile in linea.

• L'aggiunta della !importantparola chiave a qualsiasi regola CSS consente alla regola di precedere con forza tutte le altre regole CSS per quell'elemento.

• Sostituisce anche gli stili in linea dal markup.

• L'unico modo per eseguire l'override è utilizzare un'altra !importantregola , dichiarata con specificità CSS maggiore nel CSS o specificità CSS uguale più avanti nel codice.

• Da leggere - Specificità CSS di MDN 🔗

inline-stylesin un documento hanno la priorità più alta, quindi ad esempio dì se vuoi cambiare il colore di un divelemento in blue, ma hai una inline stylecon una colorproprietà impostata sured

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

Quindi, dovrei usare jQuery / Javascript? - La risposta è NO

Possiamo usare element-attrCSS Selector con !important, nota, !importantè importante qui, altrimenti non supererà gli stili inline ..

<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

Nota: L'uso !importantSOLO funzionerà qui, ma ho usato div[style]selettore per selezionare in modo specifico divcon style l'attributo

Puoi facilmente sovrascrivere lo stile inline tranne lo !importantstile inline

così

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

ma se lo hai

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

ora sarà redsolo .. e non puoi sovrascriverlo

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

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

Di seguito è riportato il collegamento per maggiori dettagli: http://css-tricks.com/override-inline-styles-with-css/

utilizzato !importantnella proprietà CSS

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

div {
        color: blue !important;
    }