A quoi sert le sélecteur hiérarchique ?

À quoi sert le sélecteur hiérarchique ? Des exemples de code spécifiques sont nécessaires

Un sélecteur hiérarchique est un sélecteur en CSS qui peut sélectionner des éléments spécifiques via la relation entre les éléments. Les sélecteurs hiérarchiques incluent les sélecteurs enfants, les sélecteurs descendants, les sélecteurs frères et sœurs adjacents et les sélecteurs frères et sœurs généraux.

Le sélecteur enfant est représenté par le signe supérieur à (>), qui indique l'élément enfant direct de l'élément sélectionné. Par exemple, sélectionnez tous les éléments enfants directs de la classe enfant sous un élément de classe parent :

.parent > .child {
    //样式
}

Le sélecteur descendant est représenté par un espace pour indiquer les éléments descendants de l'élément sélectionné. Par exemple, sélectionnez tous les éléments descendants de la classe descendant sous un élément avec la classe ancêtre :

.ancestor .descendant {
    //样式
}

Le sélecteur de frères et sœurs adjacents est représenté par un signe plus (+), indiquant que les éléments frères adjacents de l'élément sélectionné sont sélectionnés. Par exemple, sélectionnez un élément de classe element1 suivi d'un élément frère de classe element2 :

.element1 + .element2 {
    //样式
}

Le sélecteur général de frère est représenté par un tilde (~) pour indiquer les éléments frères généraux de l'élément sélectionné. Par exemple, sélectionnez tous les éléments frères suivants de la classe element2 après un élément avec la classe element1 :

.element1 ~ .element2 {
    //样式
}

L'utilisation d'un sélecteur hiérarchique peut sélectionner des éléments cibles en fonction de la relation entre les éléments, obtenant ainsi un contrôle de style plus précis. Voici un exemple de code spécifique :

Code HTML :

<div class="parent">
    <div class="child">这是子元素1</div>
    <div class="child">这是子元素2</div>
</div>
<div class="ancestor">
    <div class="descendant">这是后代元素1</div>
    <div class="descendant">这是后代元素2</div>
</div>
<div class="element1">这是元素1</div>
<div class="element2">这是元素2</div>
<div class="element2">这是元素3</div>

Code CSS :

.parent > .child {
    color: red;
}

.ancestor .descendant {
    font-size: 20px;
}

.element1 + .element2 {
    background-color: blue;
}

.element1 ~ .element2 {
    text-align: center;
}

Dans le code ci-dessus, l'enfant direct de l'élément avec la classe parent est sélectionné via le sélecteur d'enfant (.parent > .child) élément et définissez sa couleur de police sur rouge. Utilisez le sélecteur de descendant (.ancestor .descendant) pour sélectionner tous les éléments descendants de la classe descendant sous l'élément de la classe ancêtre et définissez leur taille de police sur 20 px. Utilisez le sélecteur de frère adjacent (.element1 + .element2) pour sélectionner l'élément frère de la classe element2 qui suit immédiatement l'élément avec la classe element1 et définissez sa couleur d'arrière-plan sur bleu. Utilisez le sélecteur général de frères et sœurs (.element1 ~ .element2) pour sélectionner tous les éléments frères suivants de la classe element2 qui suivent l'élément avec la classe element1 et afficher leur texte au centre.

L'utilisation de sélecteurs hiérarchiques peut sélectionner les éléments HTML de manière plus flexible. En combinant différents sélecteurs hiérarchiques, nous pouvons obtenir divers effets de style. Maîtriser l'utilisation des sélecteurs hiérarchiques peut rendre les styles CSS plus maintenables et plus lisibles, et peut également améliorer l'efficacité du développement.

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!