Quels sont les types de sélecteurs de contexte CSS ?

Il existe quatre types de sélecteurs de contexte CSS : 1. Les sélecteurs descendants, qui peuvent sélectionner tous les éléments descendants de l'élément actuel ; 2. Les sélecteurs parent-enfant, qui peuvent sélectionner tous les éléments enfants de l'élément actuel ; 3. Les sélecteurs adjacents frères et sœurs ; , Vous pouvez sélectionner des éléments qui ont un parent commun et qui sont adjacents ; 4. Tous les sélecteurs du même niveau peuvent sélectionner tous les éléments suivants qui ont un parent commun.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Sélecteur de contexte CSS Le sélecteur de contexte est un groupe d'éléments qui forment une relation "parent-enfant" ou hiérarchique, et le style est défini par leur relation

document html, qui ressemble à un document à l'envers " "Arbre", il a donc une structure hiérarchique

Chaque élément a sa propre position dans le document, c'est-à-dire son contexte

Vous pouvez donc les obtenir en fonction du contexte de l'élément

Quatre rôles d'un élément

Numéro de série Rôle Description 1 L'élément ancêtre a tous les niveaux d'éléments descendants tels que les éléments enfants et les éléments petits-enfants 2 Éléments parents un élément parent commun ensemble Quatre sélecteurs contextuels numéro de série sélecteur opérateur description exemple 1

descendants Le sélecteur espace sélectionne tous les éléments descendants de l'élément actuel div p , body * 2 sélecteur parent et fils > sélectionne tous les éléments enfants de l'élément actuel div > + Sélectionne les éléments adjacents avec un parent commun li .red + li 空格 选择当前元素的所有后代元素 div p , body * 2 父子选择器 > 选择当前元素的所有子元素 div > h2 3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li 4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li 4 Tous les sélecteurs au même niveau ~

Sélectionnez tous les éléments suivants avec un parent commun

li.red ~ li

🎜🎜Exemple🎜🎜🎜🎜🎜 上下文选择器 .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } /* 类选择器 */ .item { font-size: 2rem; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } /* 后代选择器 */ .container div { border: 1px solid coral; } /* 父子选择器,只有外层的div受影响 */ body > div { border: 3px solid green; } /* 使用后代选择器模拟父子选择器 */ /* body div.container { border: 3px solid green; } */ /* 同级相邻选择器 */ /* 选择与第5个相邻的,即后面的"一个"元素 */ /* .item.center + .item { background-color: lightgreen; } */ /* 同级所有选择器 */ /* 选择与第5个后面的,有共同父级的所有兄弟元素 */ .item.center ~ .item { background-color: lightgreen; } 1 2 3 4 5 6 7 8 9 🎜 (Partage vidéo d'apprentissage : 🎜tutoriel vidéo CSS🎜)🎜

Quels sont les types de sélecteurs de contexte CSS ?

Articles Liés