Priorité sur les classes css

Question

J'ai un span avec 2 classes, comme ceci <span class="tag invalid_tag">abc</span>. J'ajoute correctement la deuxième classe via jQuery et j'ai besoin des propriétés de la seconde classe pour remplacer la première, sans pour autant la supprimer. Par exemple, les propriétés sont la couleur de police et la couleur de fond. Habituellement, la balise est verte mais quand j'ajoute la classe "invalid_tag", elle devrait virer au rouge mais pas parce que la première classe a la priorité. Je voudrais savoir comment changer cette priorité, ou si je peux y arriver d'une manière différente.

Answer 1

La priorité des déclarations CSS repose sur leur ordre dans le CSS (les déclarations ultérieures remplacent les précédentes) et leur spécificité (les déclarations plus spécifiques remplacent celles moins spécifiques). (Cela n'a rien à voir avec l'ordre dans lequel vous spécifiez les noms de classe dans l'attribut.) Plus dans Section 6 la spécification.

Voici un exemple de commande. Ce CSS

.foo { 
    color: red; 
} 
.bar { 
    color: blue; 
} 

avec ce HTML

<p class="foo bar">Hi there</p> 
<p class="bar foo">Hi again</p> 

... résultats dans deux paragraphes bleus, parce que la deuxième déclaration l'emporte sur le premier. (Live example) Cela se produit parce que les deux déclarations ont la même spécificité.

est ici une démonstration de spécificité:

Ce CSS

p.foo { 
    color: red; 
} 
.bar { 
    color: blue; 
} 

... avec les mêmes résultats HTML dans deux rouges paragraphes, parce que le sélecteur p.foo est plus spécifique que le sélecteur .bar, donc il a la priorité même si c'est plus tôt dans le CSS. (Live example)