Que sont les sélecteurs hiérarchiques CSS3 ?

Les sélecteurs hiérarchiques CSS3 incluent : 1. Le sélecteur descendant "E F", qui sélectionne tous les éléments F descendants de l'élément E ; 2. Le sélecteur d'élément enfant "E>F", qui sélectionne tous les éléments enfants F sous l'élément E 3 ; . Le sélecteur d'élément frère adjacent "E+F" sélectionne l'élément F immédiatement après l'élément E 4. Le sélecteur d'élément frère "E~F".

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

Sélecteur descendant (E F)

Le sélecteur descendant est également appelé sélecteur contenant. Sa fonction est de sélectionner les éléments descendants d'un certain élément, tels que : E F, le E précédent est l'élément ancêtre, Ｆ Pour les éléments descendants, cela signifie que tous les éléments F descendants de l'élément E sont sélectionnés. Veuillez noter qu'un espace est requis entre eux. Ici, que F soit un élément enfant ou petit-enfant de l'élément E ou une relation plus profonde, il sera sélectionné. En d'autres termes, quel que soit le nombre de niveaux de relations que F a dans E, il sera sélectionné : Navigateur

.

.demo li {color: blue;}

Ce qui précède signifie sélectionner tous les éléments li dans div.demospa

Le sélecteur descendant pris en charge par tous les navigateurs. 3d

Sélecteur d'élément enfant (E>F)

Le sélecteur d'élément enfant ne peut sélectionner que les éléments enfants d'un certain élément, où E est l'élément parent et F est l'enfant Parmi eux, E>F signifie que tous les sous-éléments F sous l'élément E sont sélectionnés. Ceci est différent du sélecteur descendant (EF), dans lequel F est un élément descendant de E, et du sélecteur d'élément enfant E > Le code sur blog

ul > li {
background: green;
color: yellow;
}

indique que tous les sous-éléments li sous ul sont sélectionnés. Tels que : bfc

IE6 ne prend pas en charge les sélecteurs d'éléments enfants. im

Sélecteur de frères et sœurs adjacents (E + F)

Le sélecteur de frères et sœurs adjacents peut sélectionner des éléments suivant immédiatement un autre élément, et ils ont le même élément parent, en d'autres termes, les deux EF Les éléments ont le même élément parent et l'élément F est derrière l'élément E et adjacent, nous pouvons donc utiliser le sélecteur d'élément frère adjacent pour sélectionner l'élément F. démo

li + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

Le code ci-dessus indique que l'élément adjacent li de li est sélectionné. Nous avons dix li ici au total, donc le code ci-dessus sélectionne du 2ème li au 10ème li, un total de neuf, veuillez consulter le. effet : db

Depuis le li+li ci-dessus, le deuxième li est l'élément adjacent du premier li, et le troisième est le deuxième élément adjacent, donc le troisième est également sélectionné, et ainsi de suite , Par conséquent, les neuf li suivants sont tous sélectionnés Si nous le regardons d'une autre manière, nous pouvons mieux le comprendre : img

.active + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

Selon les connaissances mentionnées ci-dessus, ce code sélectionne évidemment li Pour l'élément li adjacent. à active, notez qu'il n'y a qu'un seul élément adjacent à li.active. Comme le montre l'image : di

IE6 ne prend pas en charge ce sélecteur

Sélecteur universel d'éléments frères et sœurs (E ~ F)

Le sélecteur universel d'éléments frères et sœurs est un nouveau ajout à CSS3 Un sélecteur qui sélectionnera tous les éléments frères derrière un élément. Ils sont également similaires aux éléments frères adjacents et doivent être dans le même élément parent. et l'élément F est après l'élément E, alors le sélecteur E ~ F sélectionnera les éléments F après tous les éléments E. Par exemple, le code suivant :

.active ~ li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

Ce que signifie le code ci-dessus, c'est que tous les éléments frères li derrière l'élément li.active sont sélectionnés, comme le montre la figure :

Sélecteur frère universel et sélecteur frère adjacent Très similaire, sauf que le sélecteur frère adjacent sélectionne uniquement les éléments adjacents à l'élément (un seul élément est sélectionné tandis que le sélecteur frère universel sélectionne les éléments frères adjacents de l'élément, donc cela peut prêter à confusion à mentionner, vous pouvez) ; regardez de plus près les rendus de ses frères adjacents.

IE6 ne prend pas en charge l'utilisation de ce sélecteur.

(Partage de vidéos d'apprentissage : 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!