L'exemple est très tiré par les cheveux, mais ce genre de problème arrive tout le temps si on utilise des règles trop générales (dont il faut annuler ensuite les effets dans les cas particuliers) ou trop spécifiques (qui sont du coup difficiles à annuler). Il faut être suffisamment spécifique ! Mais ça n'empêche pas les problèmes, comme le montre l'exemple.
Supposons qu'on a un site sur la nature. Certaines pages concernent des animaux, d'autres des plantes.
Sur chaque page, on a un article principal et un encadré d'infos complémentaires.
On a mis les liens en rouge dans l'encadré en utilisant le CSS suivant :
#infos a { color: tomato; }
Plus tard, on décide de différencier visuellement les liens « plantes »
des liens « animaux ». On ajoute une classe à chaque lien, plante
ou animal, et on ajoute le CSS suivant :
a.plante { color: forestgreen; font-weight: bold; }
a.animal { color: darkblue; font-weight: bold; }
On voit que les sélecteurs s'appliquent aussi dans l'encadré,
puisque les liens sont passés en gras… Mais la couleur initiale des liens reste,
car le sélecteur #infos a a une plus haute spécificité que a.plante
ou a.animal,
car un sélecteur avec un identifiant bat toujours un sélecteur sans identifiant.
Pour cette raison, éviter d'utiliser les sélecteurs d'identifiant à tort et à travers.
Ici, une solution serait d'augmenter artificiellement la spécificité des sélecteurs
plante/animal (en ajoutant un identifiant au body). Une autre serait
d'utiliser une classe à la place de l'identifiant infos (pour les règles
servant à modifier le style, et non la mise en page, cela semble une bonne idée).
L'exemple peut paraître absurde, mais il faut imaginer un contexte où il y a des milliers de lignes de CSS avec des dizaines de règles qui se complètent, s'annulent, ou se contredisent les unes les autres, écrites par plusieurs personnes différentes sur une période de plusieurs mois ! Penser aussi que bien sûr, les problème seront rarement aussi clairs qu'ici, mais arriveront plutôt dans des cas très particuliers, longtemps après que le CSS a été écrit…
Quand une règle ne fonctionne pas, penser à utiliser l'inspecteur, d'abord pour vérifier qu'elle a bien été comprise par le navigateur, et ensuite pour vérifier qu'elle n'est pas annulée par une autre (auquel cas elle apparaît barrée).