Comment contrôler la priorité de la spécification de classe

Question

J'ai quelques éléments DOM qui ont les classes foo et bar:

...

et je veux contrôler la priorité entre eux. Suivant la spécification du w3c à ce sujet, j'ai pensé qu'ajouter des sélecteurs supplémentaires au CSS pourrait augmenter la priorité. Par exemple, si je voulais que foo l'emporte sur bar, je pensais ajouter une classe dummy comme ceci:

.foo, .dummy{
  ...
}

.bar{
  ...
}

Cela fonctionnera-t-il? Y a-t-il une meilleure façon de le faire? Je sais que !important peut contrôler des attributs individuels, mais je veux une solution plus générale qui contrôle la priorité de toute la spécification de classe.

Answer 1

Si vous ajoutez d'abord une règle pour la classe .bar, puis pour la classe .foo, les règles de .foo remplaceront celles de .bar

exemple:

.bar {
    color : red;
}

.foo {
    color: blue;
}

La couleur de la div sera bleue.

Ce que vous proposez fonctionnera, mais vous devez ajouter la classe dummy à la div (pour que le sélecteur CSS corresponde)

exemple:

...