32
Maîtrise des CSS
La. spécificité. peut. être. extrêmement. importante. pour. la. correction. des. bogues,. car. vous.
devez.savoir.quelle.règle.a.priorité.et.pourquoi..Par.exemple,.supposons.que.vous.ayez.créé.
le.jeu.de.règles.suivant..D’après.vous,.de.quelle.couleur.seront.les.titres ?
#content div#main-content h2 {
color: gray;
}
#content #main-content>h2 {
color: blue;
}
body #content div[id="main-content"] h2 {
color: green;
}
#main-content div.news-story h2 {
color: orange;
}
#main-content [class="news-story"] h2 {
color: yellow;
}
div#main-content div.news-story h2.first {
color: red;
}

Bizarrement,.la.réponse.est.que.les.deux.titres.seront.gris..Le.premier.sélecteur.possède.la.
plus.haute.spécificité.parce.qu’il.est.composé.de.deux.sélecteurs.d’ID..Certains.des.derniers.
sélecteurs.peuvent.avoir.l’air.plus.complexes,.mais.comme.ils.ne.contiennent.qu’un.seul.ID,.
ils.perdent.toujours.face.aux.sélecteurs.plus.spécifiques..
Si.vous.rencontrez.des.règles.CSS.qui.ne.semblent.pas.fonctionner,.c’est.sans.doute.qu’il.
existe.un.conflit.de.spécificité..Essayez.de.rendre.vos.sélecteurs.plus.spécifiques.en.ajoutant.l’ID.de.l’un.de.leurs.parents..Si.cet.ajout.règle.le.problème,.vous.constaterez.sans.
doute.qu’il.existe.une.règle.plus.spécifique.quelque.part.dans.votre.feuille.de.styles.qui.
redéfinit.celle.que.vous.essayiez.d’appliquer..Dans.ce.cas,.n’hésitez.pas.à.parcourir.votre.
code.à.nouveau.afin.de.résoudre.les.conflits.de.spécificité.et.que.le.code.soit.aussi.léger.que.
possible.
Utiliser la spécificité dans les feuilles de styles
La. spécificité. est. très. utile. pour. concevoir. des. CSS,. car. elle. permet. de. définir. des. styles.
généraux. pour. les. éléments. communs. puis. de. redéfinir. ces. styles. pour. les. éléments. plus.
spécifiques..Par.exemple,.supposons.que.vous.souhaitiez.que.la.plus.grande.partie.du.texte.