Dans la structure HTML, comment sélectionner le premier élément enfant avec un nom de classe spécifique via CSS?

Dans la structure HTML, le positionnement précis du premier élément enfant avec un nom de classe spécifique est un problème CSS commun, en particulier lorsque le nombre d'éléments enfants est incertain. Cet article démontrera à travers des exemples comment résoudre ce problème en utilisant les fonctionnalités avancées du sélecteur CSS.

Supposons que nous ayons un conteneur div contenant plusieurs éléments de classe activebar et item , et le nombre d'éléments activebar et item est modifié dynamiquement. Notre objectif est de sélectionner le premier élément de classe d' item uniquement via CSS.

Exemple de structure HTML:

<div class="main">
  <div class="activebar"></div>
  <div class="activebar"></div>
  <div class="activebar"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Le sélecteur de pseudo-classe simple first-child ou first-of-type ne s'applique pas ici, car first-child sélectionne uniquement le premier élément enfant de l'élément parent, tandis que first-of-type sélectionne uniquement le premier des mêmes éléments de type.

Solution: utilisez les fonctionnalités étendues nth-child . Le CSS moderne permet à l'utilisation de sélecteurs complexes en nth-child pour définir la portée.

Le code CSS suivant vous permet de sélectionner avec précision le premier élément item :

 .main> .item: nth-child (n of .item) {
  / * Règles de style * /
}

n fonction du nth-child(n of .item) est: parmi tous les éléments enfants de .main .item . Cela ignore efficacement l'élément activebar et localise directement le premier élément item .

De cette façon, même si le nombre d'éléments activebar et item change, nous pouvons toujours sélectionner avec précision le premier élément item , atteignant ainsi un contrôle de style flexible.

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!