Quels sont les sélecteurs en CSS ?

Les sélecteurs en CSS incluent : 1. Sélecteur simple ; 2. Sélecteur d'attribut ; 3. Sélecteur de combinaison ; 4. Sélecteur de pseudo-classe ; 5. Sélecteur de pseudo-éléments ;

L'environnement d'exploitation de cet article : système Windows 7, version CSS3, ordinateur Dell G3.

Quels sont les sélecteurs CSS courants ?

1. Sélecteurs simples

Signification tr>

Sélecteur
*	Sélecteur d'élément universel, correspondant à n'importe quel élément
E	sélecteur de balise, correspond à tous les éléments à l'aide de la balise E
.info	sélecteur de classe, correspond à 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 à footer

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

二、属性选择器 Attribute Selectors

选择器	含义
[atrr]	选择包含 attr 属性的所有元素，不论 attr 的值为何
[attr=val]	[attr=val] 仅选择 attr 属性被赋值为 val 的所有元素

三、组合选择器 Combinators

选择器	含义
A, B	选中匹配 A 或/和 B 的元素
A B	选中匹配 B 且为匹配 A 的元素的后代元素(A B之间空格分开)
A > B	选中匹配 B 且为匹配 A 的元素的直接子元素
A + B	选中匹配 B 且为匹配 A 的元素的下一相邻元素
A ~ B	选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素

四、伪类 Pseudo-classes

选择器	含义
a:link	匹配所有未被点击的链接
a:visited	匹配所有已被点击的链接
a:hover	匹配鼠标悬停其上的a元素
a:active	匹配鼠标已经其上按下、还没有释放的a元素
li:first-child	匹配父元素的第一个子元素li
li:last-child	匹配父元素的最后一个子元素li
li:nth-child(n)	匹配父元素的第n个子元素li（odd奇数，even偶数）

五、伪元素 Pseudo-elements

选择器	含义
E::before	在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最前面
E::after	在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最后面
E::selection	应用于文档中被用户高亮的部分（比如使用鼠标选中的部分）
E::first-letter	匹配E元素的第一个字母第一行的第一个字母
E::first-line	匹配E元素的第一行

2. Sélecteurs d'attributs

Sélecteur	Signification
[atrr]	Sélectionne tous les éléments contenant l'attribut attr, quelle que soit la valeur de attr
[attr=val]	[attr=val] Sélectionnez uniquement tous les éléments dont l'attribut attr reçoit la valeur val

Trois combinateurs de sélecteur de combinaison

Sélecteur	Signification
A, B	Sélectionnez les éléments qui correspondent à A ou/et B
A B	Sélectionnez les éléments qui correspondent à B et sont des éléments descendants de l'élément qui correspond à A (un espace sépare A et B)
A > B	Sélectionnez l'élément direct qui correspond à B et est l'élément qui correspond à l'élément enfant A
A + B	Sélectionnez l'élément adjacent suivant qui correspond à B et est l'élément qui correspond à A
A ~ B	Sélectionnez les N éléments adjacents suivants qui correspondent à B et sont les éléments correspondant à A

Pseudo-classes

tr>

Sélecteur	Signification
a:link	Faire correspondre tous les liens non cliqués
a:visited	Faire correspondre tous les liens cliqués Le lien
a:hover	correspond à l'élément sur lequel survole la souris
a :active	correspond à un élément sur lequel survole la souris a été enfoncée mais n'a pas été relâchée
li:first-child	correspond au premier élément enfant de l'élément parent li
li:last-child	correspond au dernier élément enfant de l'élément parent li
li:nth- child(n)	Faire correspondre le nième élément enfant li de l'élément parent (nombre impair impair, nombre pair pair)

5. -elements

tr> Faire correspondre la première ligne de l'élément E

Sélecteur	Signification
E::before	Créez un élément enfant au sein de l'élément E, insérez le contenu généré en tant que pseudo-élément et placez-le au premier plan
E ::after	Créez un élément enfant au sein de l'élément E, insérez le contenu généré en tant que pseudo-élément et placez-le à la fin
E : :selection	Appliquer à la partie du document mise en surbrillance par l'utilisateur (comme la partie sélectionnée avec la souris)
E:: en premier -letter	Faire correspondre la première lettre de l'élément E et la première lettre de la première ligne
E::first-line

6. Sélecteurs multiplesone.two{ }，.one .two{ }，或者是.one, .two{ }

En HTML, nous attribuons parfois plusieurs balises à la même balise. , comme :

• <p class="one two"></p>

  Copier après la connexion
En CSS, il est possible de sélectionner plusieurs classes en même temps, comme :

• .one .two{}    /*两个 class 中有空格*/
  .one.two{}     /*两个 class 中沒有空格*/
  .one, .two{}   /*两个 class 中出现逗号*/

  Copier après la connexion
Quelle est la différence entre ces trois
• ?

Il y a un espace entre le premier et le deux, ce qui veut dire que je dois être deux en un pour être sélectionné.

Il n'y a pas d'espace entre un et deux dans le second, ce qui signifie qu'un certain bloc doit avoir à la fois une et deux classes avant de pouvoir être sélectionné par CSS. Le troisième et deux contiennent des virgules, ce qui signifie que s'il y en a un ou deux dans la classe, il sera sélectionné par l'éditeur.

🎜En termes simples, aucun espace signifie qu'ils doivent être inclus en même temps pour être sélectionnés ; les espaces signifient que la classe suivante sera sélectionnée si elle est intégrée dans la classe précédente ; est inclus, il sera sélectionné. 🎜🎜【Apprentissage recommandé : "🎜Tutoriel vidéo CSS🎜"】🎜🎜

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!