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

99

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 */
}
M. Alien
la source
2
Pourquoi utiliser des styles en ligne si vous souhaitez les remplacer?
Sinister Beard
36
@BFDatabaseAdmin Il peut ne pas être en mesure d'accéder au balisage où les styles en ligne sont déclarés.
TylerH

Réponses:

176

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 🔗

Rohit Agrawal
la source
1
Eh bien, ce style lui appartient en fait, il n'est pas nécessaire qu'il l'utilise uniquement pour remplacer le css en ligne
Rohit Agrawal
1
je sais mais je dis la même chose! important n'augmentera que le score pour une propriété spécifique, il peut utiliser d'autres propriétés (pas pour la substitution) dans le bloc some
Rohit Agrawal
Pourquoi une mauvaise pratique est-elle importante?
Sinister Beard
1
@BFDatabaseAdmin parce que vous ne pouvez pas remplacer cela plus tard si vous avez besoin d'un cas particulier
Rohit Agrawal
1
@BFWebAdmin le problème est que vous n'avez parfois pas le choix. par exemple, le "badge" du nouveau recaptcha invisible peut être stylé mais a des styles partiellement en ligne, vous devez donc les remplacer comme ceci ou par js et préférer une solution CSS pure.
My1
26

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

M. Alien
la source
2
Alors, dois-je utiliser des styles en ligne? - La réponse est NON :-)
PeeHaa
"Alors, devrais-je utiliser jQuery / Javascript? - La réponse est NON" Pourquoi? Si je travaille dans un environnement (tel que Sharepoint) où des styles en ligne sont ajoutés aux éléments par une entité incontrôlable, pourquoi ne pas utiliser Jquery pour supprimer les styles en ligne incriminés afin que le thème externe de mon site apparaisse? Semble une solution plus précurseur que l'explosion! Importante sur un trait que je pourrais vouloir remplacer dans un cas spécifique plus tard.
Neberu
2
@Neberu - Parce que JS peut être bloqué / désactivé sur le navigateur. L'utilisation !importantne peut pas AFAIK.
Tony
1
js est également mauvais en général, je veux dire, ouvrez-vous des fichiers exécutables envoyés par vous par une personne inconnue? Je suppose que non, mais un navigateur le fait à chaque clic
My1
11

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

IE tue, restez à l'écart
la source
1
En quoi est-ce différent des réponses qui ont été ajoutées des mois auparavant?
Sinister Beard
4
@BFDatabaseAdmin Cette réponse décrit le comportement lorsque le style en ligne a !important, un point qui n'est couvert par aucune des autres réponses. Cette réponse n'est peut-être pas totalement autonome, mais elle est différente des autres réponses fournies.
grg
mais encore une fois, utiliser un style en ligne avec important est vraiment exagéré car il a de toute façon la priorité la plus élevée par défaut.
My1
6
<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/

jroi_web
la source
5
En quoi est-ce différent des réponses qui ont été ajoutées des mois auparavant?
Sinister Beard
1
peut-être qu'il n'y a pas de différence si vous connaissiez déjà la réponse ... mais pour certains débutants, j'espère que cela pourra les aider .. en particulier le lien où il est plus détaillé ... en tout cas merci pour vos commentaires.
jroi_web
1

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;
    }
Vishal Vaghasiya
la source