Résumé des types de sélecteurs en CSS et exemples de comparaison d'efficacité

Cet article présente principalement le résumé et la comparaison de l'efficacité des types de sélecteurs en CSS, y compris les sélecteurs de pseudo-classe et les sélecteurs de pseudo-éléments. Les amis dans le besoin peuvent s'y référer

Nous savons tous que CSS a une additivité (. le même élément est spécifié par plusieurs règles de style), l'héritage (les éléments descendants hériteront de certains styles et attributs des éléments prédécesseurs) et la priorité (en raison de la superposition et de l'héritage du CSS, la priorité sera générée, qui fait référence à quelle règle de style finira par agir sur l'élément spécifié ? Il ne suit qu'une seule règle. Plus il est spécifique, plus la priorité est élevée.)

De ce qui précède, on peut voir que plus le sélecteur est spécifique, plus sa priorité est élevée. sera. Plus le niveau est élevé,

Ici, résumons les sélecteurs CSS :

1. Sélecteurs de base (sélecteur de balise, sélecteur universel, sélection de classe et d'ID)
.

.info
2. Sélecteurs de combinaisons multi-éléments (sélecteur d'étiquette [sélecteur de groupe], sélecteur descendant, sélecteur d'élément enfant, sélecteur adjacent)

Sélecteur

Description

Version CSS

E

Sélecteur de balise, fait correspondre tous les éléments à l'aide de la balise E

选择器	描述	CSS版本
E	标签选择器，匹配所有使用E标签的元素
*	通用元素选择器，匹配任何元素
.info	class选择器，匹配所有class属性中包含info的元素
#footer	id选择器，匹配所有id属性等于footer的元素

*

Sélecteur d'élément universel, correspond à n'importe quel élément

sélecteur de classe, correspondant à tous les éléments contenant des informations dans l'attribut de classe

#footer

sélecteur d'identifiant, correspond à tous les éléments dont l'attribut id est égal au pied de page

选择器	描述	CSS版本
E，F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开
E F	包含选择符，匹配所有被E元素包含的F元素
E>F	子元素选择器，匹配所有E元素的儿子元素F
E F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E~F	匹配任何E标签之后的同级F标签

Sélecteur	Description	Version CSS
E, F	Sélecteur multi-éléments, fait correspondre tous les éléments E ou F en même temps, à utiliser entre E et F séparés par des virgules
E F	Contient des sélecteurs, correspondant à tous les éléments F contenus par les éléments E td>
E>F	Sélecteur d'élément enfant, correspond à tous les éléments enfants F
E F	Sélecteur d'éléments adjacents, correspondant à tous les éléments frères F
E~F	Faire correspondre la balise F frère après n'importe quelle balise E	td>

选择器	描述	CSS版本
E[attribute]	匹配所有具有attribute属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）	2.1
E[attribute=value]	匹配所有attribute属性等于“value”的E元素	2.1
E[attribute~=value]	匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素	2.1
E[attribute^=value]	匹配任何E标签之后的同级F标签	2.1
E[attribute$=value]	匹配所有attribute属性值包含有“value”的E元素	3
E[attribute*=value]	匹配所有attribute属性值是以"value"结束的E元素	3

3. Sélecteur d'attribut

4. Sélecteur de pseudo-classe

选择器	描述	CSS版本
E:first-line	匹配所有E标签内的第一行	2.1
E:first-letter	匹配所有E标签内的第一个字母	2.1
E:before	在E标签之前插入生成的内容	2.1
E:after	在E标签之后插入生成的内容	2.1

5. Sélecteur de pseudo-éléments

Ici, ce que nous devons savoir, c'est comment le navigateur lit le sélecteur. Chris Coyier a dit un jour dans l'article "Efficiently Rendering CSS" que "le navigateur lit votre sélecteur et suit le principe de lecture de droite à gauche du sélecteur. En d'autres termes, l'ordre dans lequel le navigateur lit le sélecteur est Procéder". de droite à gauche. »

La dernière partie du sélecteur, qui est la partie la plus à droite du sélecteur (dans ce cas la partie a[titre]) est appelée "sélecteur à clé" et déterminera l'efficacité de votre sélecteur, comment ? Est-ce haut ou bas.

Alors, comment rendre les sélecteurs de clés plus efficaces et performants ? En fait, c'est très simple. L'essentiel est de comprendre un point : "Plus le sélecteur à clé est spécifique, plus ses performances sont élevées.

Les sélecteurs ont une efficacité inhérente. donné par Steve Souders :

1.sélecteur d'id (#Myid)
2. Le sélecteur de classe (.myclassName)
3. Sélecteur de balise (P, H1, P)
4. Sélecteur avancé (H1 P)
5. Sélecteur enfant (ul > li)
6. Sélecteur descendant (li a)
7. Sélecteur générique (*)
8. Sélecteur d'attribut (a[ rel= "external"])
9. Sélecteur de pseudo-classe (a:hover, li:nth-child)
L'efficacité des neuf sélecteurs ci-dessus est classée de haut en bas, en fonction du sélecteur d'ID. l'efficacité est la plus élevée, tandis que l'efficacité des sélecteurs de pseudo-classe est la plus faible.

Comparons ces exemples pour voir qui est le plus efficace :

1 #myId span
2. span #myId<.>À partir de l'exemple ci-dessus, nous pouvons savoir que l'efficacité ci-dessous est supérieure à celle ci-dessus. Étant donné que le sélecteur de clé le plus à droite est le plus spécifique, il est également conforme à l’ordre de priorité du sélecteur ci-dessus.

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!