Quelles sont les caractéristiques des sélecteurs de niveau ?

Quelles sont les caractéristiques des sélecteurs hiérarchiques ? Des exemples de code spécifiques sont nécessaires

Les sélecteurs hiérarchiques (sélecteurs hiérarchiques CSS) sont un type spécial de sélecteurs CSS qui nous permettent de sélectionner des éléments spécifiques via leurs relations. Les sélecteurs hiérarchiques utilisent les relations parent-enfant, frère/sœur, etc. entre les éléments pour sélectionner les éléments cibles de manière plus pratique et plus précise. Ce qui suit présentera plusieurs fonctionnalités communes des sélecteurs hiérarchiques, avec des exemples de code spécifiques.

1. Sélecteur descendant

Le sélecteur descendant nous permet de sélectionner des éléments en spécifiant la relation hiérarchique au sein de l'élément. Il utilise un espace (caractère espace) pour connecter deux éléments, ce qui signifie que tous les seconds éléments du premier élément seront sélectionnés.

Par exemple, nous avons une structure HTML comme suit :

<div id="parent">
  <p>第一个段落</p>
  <p>第二个段落</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

Nous pouvons utiliser le sélecteur descendant pour sélectionner les éléments de la liste :

#parent li {
  color: red;
}

Le code ci-dessus sélectionnera tous les éléments sous l'élément avec id comme "parent" La couleur du texte de l'élément li est définie sur rouge. id为"parent"的元素下的所有li元素的文本颜色设置为红色。

2. 子元素选择器（Child Selector）

子元素选择器只会选择作为某个元素直接子元素的元素。它使用大于号（>`）连接两个元素。

继续上述例子，如果我们只想选择直接作为id为"parent"的元素的子元素的li元素，我们可以使用子元素选择器：

#parent > ul > li {
  color: blue;
}

上述代码将只会将直接作为id为"parent"的元素子元素中的li元素的文本颜色设置为蓝色。

3. 相邻兄弟选择器（Adjacent Sibling Selector）

相邻兄弟选择器选择紧接在特定元素后的相邻兄弟元素。它使用加号（+）连接两个元素。

考虑以下HTML结构：

<div>
  <p>第一个段落</p>
  <h2>副标题</h2>
  <p>第二个段落</p>
  <h2>标题1</h2>
  <p>第三个段落</p>
  <h2>标题2</h2>
</div>

如果我们只想选择h2元素后面的第一个p元素，我们可以使用相邻兄弟选择器：

h2 + p {
  font-weight: bold;
}

上述代码将只会把紧接在h2元素后的第一个p

Sélecteur d'enfants

Le sélecteur d'enfants sélectionnera uniquement les éléments qui sont des enfants directs d'un élément. Il utilise le signe supérieur à (>`) pour connecter deux éléments.

🎜En continuant avec l'exemple ci-dessus, si nous voulons sélectionner uniquement des éléments li qui sont directement enfants d'éléments avec id comme "parent", nous pouvons utiliser le sélecteur d'élément enfant : 🎜 rrreee🎜Le code ci-dessus définira uniquement la couleur du texte de l'élément li qui est directement un enfant de l'élément dont le id est "parent" sur bleu. 🎜
🎜Sélecteur de frères et sœurs adjacents 🎜🎜🎜Le sélecteur de frères et sœurs adjacents sélectionne l'élément frère adjacent immédiatement après un élément spécifique. Il utilise le signe plus (+) pour connecter deux éléments. 🎜🎜Considérez la structure HTML suivante : 🎜rrreee🎜Si nous voulons sélectionner uniquement le premier élément p après l'élément h2, nous pouvons utiliser le sélecteur de frère adjacent : 🎜rrreee 🎜Le code ci-dessus mettra uniquement en gras le texte du premier élément p immédiatement après l'élément h2. 🎜🎜Pour résumer, les sélecteurs hiérarchiques peuvent sélectionner les éléments cibles avec plus de précision grâce à la relation entre les éléments. Le sélecteur descendant sélectionne la relation hiérarchique au sein de l'élément via des espaces, le sélecteur d'élément enfant sélectionne uniquement les éléments qui sont des enfants directs d'un élément et le sélecteur frère adjacent sélectionne les éléments frères adjacents après un élément spécifique. Ces sélecteurs peuvent nous aider à appliquer des styles et à manipuler le DOM de manière plus flexible. 🎜🎜Limité par l'espace, cet article ne présente que plusieurs fonctionnalités communes et exemples de code de sélecteurs hiérarchiques. Dans les applications réelles, si vous avez besoin d'une compréhension plus approfondie des différentes utilisations et caractéristiques des sélecteurs hiérarchiques, vous pouvez vous référer aux documents CSS ou aux didacticiels en ligne pertinents. 🎜

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!