Beaucoup de gens trouvent le CSS complexe. Ils proposent diverses excuses: le fait de ne pas pouvoir comprendre le CSS ou le CSS est mauvais en soi. Mais la réalité est que les gens n'ont tout simplement pas trouvé le temps de l'étudier vraiment. Si vous lisez cet article, vous êtes intéressé à apprendre le CSS et c'est génial!
Qu'est-ce que la spécificité CSS?
Avez-vous déjà écrit un style, mais ça ne marche pas, alors vous ajoutez
! Important (ou pas), et pourtant ça ne marche pas? Ensuite, vous regardez Devtools et réalisez qu'un autre style chevauche quelque part le vôtre?
C'est la spécificité du CSS! C'est ainsi que le navigateur sélectionne les sélecteurs concurrents à appliquer à l'élément. Lorsque le navigateur voit que deux sélecteurs ou plus correspondent au même élément et que les sélecteurs ont des règles en conflit, il a besoin d'un moyen de déterminer laquelle des règles appliquer à cet élément. La façon dont cela se produit est appelée «valeur de spécificité CSS».
Avant de nous plonger dans la spécificité CSS, rappelez-vous ces choses:- La spécificité CSS n'est importante que lorsque plusieurs sélecteurs affectent le même élément. Le navigateur a besoin d'un moyen de déterminer le style à appliquer à l'élément correspondant lorsque des valeurs de propriété conflictuelles existent.
- Lorsque deux sélecteurs correspondants ou plus ont la même valeur de spécificité (poids), le navigateur sélectionne le sélecteur de correspondance «le plus récent» qui apparaît plus près du bas de la liste des sélecteurs correspondants. Le paragraphe suivant explique ce qu'est une «liste de sélecteurs appropriés».
- Le navigateur crée une «liste de sélecteurs appropriés» en combinant tous les styles de la page Web et en filtrant ceux qui ne correspondent pas à l'élément «en cours de style» . Les premiers sélecteurs de la feuille de style sont en haut de la liste et les derniers sélecteurs en bas.
- La propriété style d'un élément a une valeur de spécificité supérieure à celle des sélecteurs dans les feuilles de style, sauf s'il y en a ! Important dans le sélecteur de feuille de style.
- L'utilisation de ! Important (ce qui est considéré comme une mauvaise pratique dans certains cas) modifie la spécificité du sélecteur. Lorsque deux sélecteurs ont la même spécificité, le sélecteur avec ! Important gagne. Et quand ils l'ont tous les deux ! Important , le sélecteur "le plus récent" gagne.
Valeur de spécificité
Nous pouvons maintenant passer à la façon dont le navigateur détermine la spécificité du sélecteur.
La spécificité du sélecteur peut être représentée par une chaîne de trois chiffres séparés par un trait d'union (ou autre): «2–4–1». Le premier chiffre est le nombre de sélecteurs ID présents, le second est le nombre de sélecteurs de classe, les sélecteurs d'attribut et de pseudo-classe, et le troisième est le nombre de sélecteurs de type et de pseudo-élément disponibles. Par exemple:
#red.blue // 1-1-0 #green // 1-0-0 div.yellow#red // 1-1-1 .red.blue.yellow // 0-3-0
Définition des plus «spécifiques»
Pour déterminer quel sélecteur est plus spécifique, vous pouvez comparer chacune des trois valeurs.
Disons que vous avez
1-1-1 et
0-3-0 , comme dans les deux derniers exemples, et que vous devez déterminer celui qui a le plus de spécificité. Vous comparez d'abord les dernières valeurs
1 et
0 , et dans ce cas
1 gagne. Cela signifie qu'à l'heure actuelle,
div.yellow#red a une plus grande valeur de spécificité ... mais nous n'avons pas fini de comparer les valeurs.
Ensuite, comparez les valeurs
1 et
3 ,
3 victoires. Actuellement, .red.blue.yellow a une plus grande valeur de spécificité.
Enfin, nous comparons les premières valeurs,
1 et
0 , et
1 gagne, donc
div.yellow#red a plus de spécificité que
.red.blue.yellow .
La spécificité CSS du sélecteur fournit une bonne explication de la raison pour laquelle aucun nombre de sélecteurs de classe ne peut remplacer le sélecteur d'ID.
Petits avertissements
3 «pièges» à connaître:- J'ai écrit ci-dessus que le deuxième nombre d'une séquence de nombres composée de trois est «le nombre de sélecteurs de classe, de sélecteurs d'attribut et de pseudo-classes». Ceci est vrai dans tous les cas sauf quand il s'agit
:not() pseudo-classe. Quand il s'agit :not() pseudo-classe, nous ne la considérons pas, mais simplement l'ignorons. Mais les sélecteurs à l'intérieur ne sont pas ignorés, ils sont considérés comme normaux. - La spécificité CSS comprend la «forme» d'un sélecteur. Cela signifie que lorsque vous avez
*[id="yellow"] et #yellow , le premier est traité comme un sélecteur d'attribut. - Le sélecteur universel
* seul ne compte pas pour la spécificité du sélecteur. Dans le paragraphe [id="yellow"] ci-dessus, une partie du sélecteur est ce qui compte vraiment.
J'espère que cet article est facile à comprendre et aide à comprendre ce qu'est la spécificité CSS. Vous pouvez maintenant regarder le style et déterminer facilement à quel point il est «spécifique».