Maison >interface Web >tutoriel CSS >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)
.
| Sélecteur | Description | Version CSS | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| E | Sélecteur de balise, fait correspondre tous les éléments à l'aide de la balise E |
|
|||||||||||||||
| * | 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 |
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 |
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!