Comment puis-je remplacer les styles en ligne par des CSS externes ?

Question

J'ai un balisage qui utilise des styles en ligne, mais je n'ai pas accès à la modification de ce balisage. Comment puis-je remplacer les styles en ligne dans un document en utilisant uniquement les 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 */
}

Answer 1

La seule façon de remplacer le style en ligne est d'utiliser la fonction !important à côté de la règle CSS. L'exemple suivant en est une illustration.

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 :

• Utilisation de !important n'est pas considéré comme une bonne pratique . Par conséquent, vous devriez éviter les deux !important et le style en ligne.

• Ajout de la !important à toute règle CSS laisse la règle prévalent de manière forcée sur toutes les autres règles CSS pour cet élément.

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

• Le seul moyen de passer outre est d'utiliser une autre !important règle déclarés soit avec une spécificité CSS plus élevée dans le CSS, soit avec une spécificité CSS égale plus tard dans le code.

• A lire absolument - Spécificité CSS par MDN

Answer 2

inline-styles dans un document ont la priorité la plus élevée, donc par exemple, si vous voulez changer la couleur d'un fichier div à l'élément blue mais vous avez une inline style con un color la propriété est réglée sur 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-attr Sélecteur CSS avec !important note, !important est important ici, sinon il ne remplacera 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 de !important ONLY fonctionnera ici, mais j'ai utilisé div[style] pour sélectionner spécifiquement div ayant style attribut

Answer 3

Vous pouvez facilement remplacer le style en ligne, à l'exception du style en ligne. !important style

donc

<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 vous avez

<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 sera red seulement et vous ne pouvez pas l'ignorer.

Answer 4

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

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

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

Answer 5

Utilisé !important dans la propriété CSS

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

div {
        color: blue !important;
    }