Comment puis-je remplacer les styles en ligne avec du CSS externe?

J'ai un balisage qui utilise des styles en ligne, mais je n'ai pas accès pour modifier ce balisage. Comment remplacer les styles en ligne dans un document en utilisant uniquement CSS? Je ne veux pas utiliser jQuery ou 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 */
}

Le seul moyen de remplacer le style en ligne est d'utiliser un !importantmot-clé à côté de la règle CSS. Voici un exemple.

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>

Notes IMPORTANTES:

• L'utilisation !importantn'est pas considérée comme une bonne pratique . Par conséquent, vous devez éviter les deux !importantet le style en ligne.

• L'ajout du !importantmot - clé à une règle CSS permet à la règle de précéder de force toutes les autres règles CSS pour cet élément.

• Il remplace même les styles en ligne du balisage.

• La seule façon de remplacer est d'utiliser une autre !importantrègle , déclarée soit avec une spécificité CSS plus élevée dans le CSS, soit une spécificité CSS égale plus tard dans le code.

• Doit lire - Spécificité CSS par MDN 🔗

inline-stylesdans un document la plus haute priorité, donc par exemple que si vous voulez changer la couleur d'un divélément blue, mais vous avez un inline styleavec un colorensemble de propriétés à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 */
}

Alors, dois-je utiliser jQuery / Javascript? - La réponse est NON

Nous pouvons utiliser element-attrCSS Selector avec !important, notez, !importantc'est important ici, sinon il ne dépassera pas les styles en ligne.

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

Démo

Remarque: L' utilisation !importantne fonctionnera que ici, mais je l' ai utilisé div[style]sélecteur pour sélectionner spécifiquement divayant style attribut

Vous pouvez facilement remplacer le style en ligne, sauf le !importantstyle en ligne

alors

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

mais si tu as

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

maintenant ce ne sera redque .. et vous ne pouvez pas le remplacer

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

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

Ci-dessous le lien pour plus de détails: http://css-tricks.com/override-inline-styles-with-css/

utilisé !importantdans la propriété CSS

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

div {
        color: blue !important;
    }