Qu'est-ce qu'un sélecteur hiérarchique en CSS ? Comment l'utiliser ?

Dans l'article précédent " Expliquez en détail les sélecteurs de base de CSS et parlez de la priorité des sélecteurs ", nous avons découvert les sélecteurs de base en CSS. Dans cet article, nous parlerons des sélecteurs hiérarchiques, j'espère que cela sera utile. tout le monde a aidé!

Level Selector CSS Level Selector est une utilisation de sélecteur fournie en fonction de la relation entre les arbres de nœuds HTML, donc si vous voulez bien apprendre le Level Selector , vous devez d'abord comprendre HMTL Quelle est la relation entre les éléments on dirait. [Apprentissage recommandé : Tutoriel vidéo CSS ]

Premier coup d'œil au code HTML suivant :

nbsp;html>

HTML测试代码

Le code ci-dessus peut être dessiné comme l'arborescence de nœuds suivante, comme le montre la figure ci-dessous

Regardons maintenant un élément HTML Il existe trois relations entre les éléments dans les pages HTML comme suit :

La relation entre le parent et l'enfant : Dans le code ci-dessus, l'élément

, et inversement

est le des éléments enfants. il existe de nombreuses autres structures parent-enfant de ce type. 元素是

元素的的父级元素，反之

是 的子级元素，当然这种父子结构还有跟多。 兄弟之间的关系 ：在上述代码代码中，

元素和

元素是兄弟元素， 元素和 元素也是兄弟元素。

祖先与后代之间的关系 ：在上述代码代码中，

元素是 元素的后代元素，反之 元素是

元素的祖先元素。

层级选择器种类

根据HTML元素之间的3种关系，CSS的层级选择器提供了如下4种用法：

后代选择器：将某个元素当做祖先元素，定位该元素的所有后代元素。

子级选择器：将某个元素当做父级元素，定位该元素的所有子级元素。

相邻兄弟选择器：将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的下一个指定元素

普通兄弟选择器：是将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的之后任意指定元素。

选择符

CSS提供的4个选择符，对应着CSS层级选择题的四种用法，如下所示

表示后代关系的空格（ ）

表示父子关系的尖括号（ > ）

表示相邻兄弟关系的加号（ + ）

表示兄弟关系的波浪号（ ~

Relation entre frères : Dans le code ci-dessus, l'élément

et l'élément

sont des éléments frères, Le L'élément et l'élément sont également des éléments frères.

La relation entre ancêtres et descendants

: Dans le code ci-dessus, l'élément

est l'élément descendant de l'élément , et vice versa L'élément est l'ancêtre de l'élément

.

Types de sélecteurs hiérarchiques

Selon les trois relations entre les éléments HTML, les sélecteurs hiérarchiques CSS proposent les 4 utilisations suivantes :

Sélecteur descendant : Traitez un élément comme un élément ancêtre et localisez tous les éléments descendants de cet élément.

Sélecteur enfant : traitez un élément comme un élément parent et localisez tous les éléments enfants de cet élément.

Sélecteur frère adjacent : utilise un certain élément comme élément cible et localise l'élément spécifié suivant qui a le même élément parent que l'élément cible

Sélecteur frère ordinaire : utilise un certain élément comme élément cible, position tout élément spécifié qui a le même élément parent que l'élément cible.

Sélecteurs

Les 4 sélecteurs fournis par CSS correspondent aux quatre utilisations des questions à choix multiples au niveau CSS, comme indiqué ci-dessous

L'espace ( ) qui représente la relation descendante

représente le relation parent-enfant Les crochets angulaires ( > )

🎜🎜 Le signe plus indiquant la relation fraternelle adjacente ( + ) 🎜🎜🎜🎜 Le tilde indiquant la relation fraternelle ( ~ ) 🎜🎜🎜🎜Dans le développement Web, les deux premiers sont plus couramment utilisés - 🎜sélecteur descendant🎜 et 🎜sélecteur enfant🎜. 🎜🎜Jetons d'abord un coup d'œil à un morceau de code : 🎜 使用CSS3层次选择器 * {margin:0;padding:0;} body {width: 300px; margin:0 auto;} div{margin:5px;padding:5px;border:1px solid #ccc;} 1 2 3 4 5 6 7 8 9 10 🎜🎜🎜🎜🎜Le sélecteur descendant🎜🎜🎜 est utilisé pour sélectionner tous les éléments descendants d'un certain élément. Par exemple, dans le code HTML ci-dessus, quel sera le. effet de l'utilisation du style suivant ? 🎜 body div { background-color: yellow; } 🎜Ici, la couleur d'arrière-plan de l'élément div descendant de l'élément body est définie sur jaune. En d’autres termes, tous les divs sont teints en jaune. 🎜🎜🎜🎜🎜🎜Sélecteur d'enfants🎜🎜🎜 est utilisé pour sélectionner tous les éléments enfants de premier niveau sous un certain élément (éventuellement plusieurs éléments). Par exemple, quel sera l'effet si nous utilisons le sélecteur et le style suivants ? 🎜 body > div { background-color: red; } 🎜Après avoir défini ainsi les éléments div de premier niveau sous le corps, voici les éléments div avec le contenu 1, 2, 3, 4 et 7, définissez la couleur d'arrière-plan sur rouge. 🎜🎜🎜🎜🎜🎜Sélecteur frère adjacent🎜🎜🎜 est utilisé pour sélectionner l'élément suivant dans le répertoire frère d'un élément (ou de certains éléments). Par exemple, à quoi ressemblera l’effet après avoir utilisé ici les paramètres de style suivants ? 🎜 .active + div { background-color: green; } 🎜Ici, nous définissons le nœud frère adjacent du sélecteur .active, qui est le deuxième élément div, et définissons sa couleur d'arrière-plan sur vert. 🎜🎜🎜🎜🎜🎜Sélecteur universel de frères et sœurs🎜🎜🎜 est utilisé pour sélectionner toutes les balises suivantes dans le répertoire frère d'un certain (ou de plusieurs) élément. Il est similaire au sélecteur frère adjacent et doit se trouver dans le même élément parent. 🎜 比如使用下面的代码，影响到的样式：

.active ~ div { background-color: pink; } 这里将类名为"active"的元素（这里为第一个div）的通用兄弟（这里是内容为2、3、4、7的div）设置了背景色为粉红色。

（学习视频分享： web前端入门 ）

Qu'est-ce qu'un sélecteur hiérarchique en CSS ? Comment l'utiliser ?

Articles Liés