Sélections CSS: spécificité

Les extraits suivants proviennent du livre "CSS Master" écrit par Tiffany B. Brown. Ce livre est disponible dans les magasins du monde entier, et vous pouvez également acheter la version E-Book ici.

La spécificité CSS détermine quelles déclarations de style s'appliquent finalement à l'élément. Le sélecteur de cartes génériques (*) a la spécificité la plus faible et le sélecteur d'ID a la spécificité la plus élevée. Le sélecteur descendant (par exemple P IMG) et le sous-sélecteur (par exemple .panel & gt; H2) sont plus spécifiques que le sélecteur de type (par exemple P, IMG ou H1).

À première vue, le calcul des valeurs précises de spécificité semble délicate. Comme indiqué dans le niveau de sélecteur 3, vous avez besoin:

• Statistiques Le nombre de sélecteurs d'ID dans le sélecteur (= a)
• Statistiques Le nombre de sélecteurs de classe, de sélecteurs d'attribut et de pseudo-classes dans les sélecteurs (= b)
• Statistiques Le nombre de sélecteurs de type et pseudo-éléments dans les sélecteurs (= c)
• Ignorez le sélecteur générique

Ces valeurs A, B et C sont ensuite combinées pour former la valeur spécifique finale. Par exemple, le sélecteur d'ID #foo a une spécificité de 1,0,0. La spécificité du sélecteur d'attribut (par exemple [type = e-mail]) et le sélecteur de classe (par exemple .chart) est 0,1,0. L'ajout d'une pseudo-classe (par exemple: premier enfant, par exemple .Chart: premier-enfant) fera la spécificité 0,2,0. Cependant, l'utilisation d'un sélecteur de type ou d'élément simple (par exemple H1 ou P) ne fera que la spécificité 0,0,1.

Remarque: calculer la spécificité

La calculatrice de spécificité de Keegan Street et le CSS de Joshua Peek expliquent l'aide à apprendre et à calculer la spécificité du sélecteur.

Bien sûr, des sélecteurs complexes et des sélecteurs combinés produiront des valeurs de spécificité plus élevées. Regardons un exemple. Considérez le CSS suivant:

<code>ul#story-list > .book-review {
    color: #0c0;
}

#story-list > .book-review {
    color: #f60;
}</code>

Ces deux ensembles de règles sont similaires, mais pas les mêmes. Le premier sélecteur, ul # story-list & gt;. .BookReview, contient le sélecteur de type (UL), le sélecteur d'identification (# story-list) et le sélecteur de classe (.BookReview). Sa valeur de spécificité est de 1,1,1. Le deuxième sélecteur # story-list & gt; Sa valeur de spécificité est de 1,1,0. Même si notre règle # story-list & gt; .

Les pseudoclastes tels que: lien ou: invalide ont le même niveau de spécificité que les sélecteurs de classe. Les valeurs de spécificité de A: Link et A.external sont toutes deux 0,1,1. De même, des pseudo-éléments tels que :: avant et :: après sont aussi spécifiques que des types ou des sélecteurs d'éléments. Si la spécificité des deux sélecteurs est la même, la cascade prend effet. Voici un exemple:

<code>a:link {
    color: #369;
}
a.external {
    color: #f60;
}</code>

Si nous appliquons ce CSS, tous les liens seront en bleu ardoise, sauf pour les liens qui appliquent la classe externe. Ces liens seront changés en orange.

Garder une faible spécificité aide à prévenir la propagation du sélecteur, c'est-à-dire la tendance de la spécificité et de la longueur du sélecteur à augmenter avec le temps. Cela se produit généralement lorsque vous ajoutez de nouveaux développeurs à votre équipe ou de nouveaux formulaires de contenu à votre site Web. La propagation des sélecteurs peut également entraîner des difficultés de maintenance à long terme. Vous finissez par utiliser un sélecteur plus spécifique pour écraser d'autres ensembles de règles ou vous devez refactor le code. Le sélecteur plus long augmente également le poids du fichier CSS.

Nous discutons des stratégies pour maintenir la spécificité faible au chapitre 2.

Conclusion

Après avoir lu ce chapitre, vous devriez avoir une bonne compréhension du sélecteur CSS. Plus précisément, vous devez savoir comment:

• Appliquer CSS à des éléments spécifiques, des pseudo-éléments et des pseudo-classes à l'aide de sélecteurs
• Comprendre la différence entre les pseudo-éléments et les pseudo-classes
• Utiliser des pseudo-classes plus récentes introduites dans les niveaux de sélecteur 3 et 4 spécifications
• Spécificité de calcul

Dans le chapitre suivant, nous présenterons certaines des règles d'or pour la rédaction de CSS maintenables et extensibles.

Des questions fréquemment posées sur les sélecteurs CSS et la spécificité (FAQ)

Quelle est l'importance de la spécificité du CSS dans le développement Web?

La spécificité CSS est un concept clé du développement Web car il détermine quelle règle CSS applique le navigateur. Lorsque plusieurs règles CSS peuvent être appliquées à un élément, le navigateur suit des règles spécifiques pour décider des règles à utiliser. Comprendre la spécificité du CSS peut aider les développeurs à écrire un code CSS plus efficace et plus efficace, à éviter les remplacements inutiles et à résoudre les problèmes CSS plus efficacement.

Comment calculer la spécificité CSS?

Le calcul de la spécificité CSS est basé sur différents types de sélecteurs utilisés dans les règles CSS. Chaque type de sélecteur a une valeur de spécificité différente. Les styles en ligne ont la spécificité la plus élevée, suivi des sélecteurs d'ID, des sélecteurs de classe, des sélecteurs d'attribut et des pseudo-classes, et enfin tapez les sélecteurs et les pseudo-éléments. La spécificité d'une règle CSS est la somme de ses valeurs spécifiques au sélecteur.

Pouvez-vous expliquer le concept de spécificité CSS avec un exemple?

Considérons un exemple. Supposons que nous ayons une règle CSS avec le sélecteur de classe .class1 et une autre règle avec le sélecteur d'ID # ID1. Si ces deux règles peuvent être appliquées au même élément, une règle avec un sélecteur d'ID est appliquée car le sélecteur d'ID a une spécificité plus élevée que le sélecteur de classe.

Que se passe-t-il lorsque deux règles CSS ont la même spécificité?

Lorsque deux règles CSS ont la même spécificité, la dernière règle qui apparaît dans le code CSS sera appliquée. En effet, CSS suit la stratégie de la «Dernière Règle» lorsqu'il s'agit de règles avec la même spécificité.

Comment couvrir la spécificité CSS?

Vous pouvez remplacer la spécificité CSS en augmentant la spécificité des règles CSS. Cela peut être fait en ajoutant des sélecteurs plus spécifiques aux règles. Une autre façon de remplacer la spécificité CSS est d'utiliser la! Règle importante. Cependant, le! important doit être évité chaque fois que possible, car cela rendra votre code CSS plus difficile à gérer et à déboguer.

Quel est le rôle de l'héritage dans la spécificité du CSS?

L'héritage est une caractéristique de CSS où certains types d'attributs sont automatiquement transmis de l'élément parent à son élément enfant. Cependant, les styles hérités ont la spécificité la plus basse et peuvent être facilement écrasés par tout style direct appliqué à l'élément.

Comment le sélecteur générique affecte-t-il la spécificité CSS?

Le sélecteur de caractères génériques (*) n'a aucun effet sur la spécificité CSS. Cela signifie que sa valeur de spécificité est de 0,0,0,0. Par conséquent, tout autre sélecteur utilisé dans la même règle remplacera le sélecteur de cartes génériques.

Quelle est la spécificité des pseudo-éléments dans CSS?

La spécificité du pseudo-élément dans CSS est de 0,0,0,1. Cela signifie qu'ils ont la même spécificité que les sélecteurs de type (tels que Div, P, etc.) et sont remplacés par les sélecteurs de classe, les sélecteurs d'identification et les styles en ligne.

: pas () Comment la pseudo-classe affecte-t-elle la spécificité CSS?

La pseudo-classe: non () dans CSS n'augmente pas la spécificité du sélecteur. Au lieu de cela, le calcul spécifique est basé sur les paramètres transmis à la fonction: non (). Par exemple, dans: pas (.class1), la spécificité est la même que .class1.

Puis-je utiliser plusieurs sélecteurs dans une seule règle CSS? Comment cela affecte-t-il la spécificité?

Oui, vous pouvez utiliser plusieurs sélecteurs dans une seule règle CSS. La spécificité de ces règles est la somme de toutes ses spécificités de sélecteur. Par exemple, dans # id1.class1, la spécificité est la somme de la spécificité # id1 et .class1.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!