Sélecteur d'enfants (sélecteur CSS)

Description

Ce sélecteur correspond à tous les éléments qui sont les enfants immédiats d'un élément spécifié. Le combinateur dans un sélecteur d'enfants est un signe plus grand que (>). Il peut être entouré de caractères blancs, mais si c'est le cas, Internet Explorer 5 sur Windows le traitera incorrectement comme un sélecteur descendant. La meilleure pratique consiste donc à éviter les espaces blancs autour de ce combinateur.

Considérez ce fragment HTML:

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Subitem 2A</li>
      <li>Subitem 2B</li>
    </ol>
  </li>
</ul>

Essayons de faire correspondre les éléments dans le fragment ci-dessus avec le sélecteur ci-dessous:

ul>li {
  ⋮ <span>declarations
</span>}

Le sélecteur d'enfants ci-dessus ne correspondra que les deux éléments Li qui sont des enfants de l'élément UL. Il ne correspondra pas aux sous-éléments, car leur parent est l'élément ol.

Exemple

Voici un exemple du sélecteur d'enfants au travail:

ul>li {
  ⋮ <span>declarations
</span>}

Ce sélecteur correspond à tous les éléments Li qui sont les enfants immédiats d'un élément UL - c'est-à-dire tous les éléments Li qui ont un élément UL en tant que parent.

Questions fréquemment posées (FAQ) sur les sélecteurs d'enfants CSS

Quelle est la différence entre un sélecteur d'enfants et un sélecteur descendant dans CSS?

Dans CSS, un sélecteur d'enfants ne cible que les enfants directs d'un élément parent spécifique, tandis qu'un sélecteur descendant cible tous les éléments qui descendent d'un élément d'ancêtre spécifique, quel que soit le nombre de niveaux de profondeur. Le sélecteur d'enfants utilise le symbole «>», tandis que le sélecteur descendant utilise un espace. Par exemple, «div> p» ne sélectionne que des paragraphes qui sont des enfants directs d'une div, tandis que «Div P» sélectionne tous les paragraphes au sein d'une div, quel que soit leur niveau de nidification.

Comment puis-je sélectionner uniquement le premier enfant d'un élément dans CSS, vous pouvez utiliser le «premier pas-child» Pseudo Pseudo. Par exemple, «Div> P: First-Child» ne sélectionnera que le premier paragraphe qui est un enfant direct d'une div. Ceci est utile lorsque vous souhaitez appliquer des styles uniquement au premier enfant d'un élément.

Puis-je utiliser le sélecteur d'enfants pour cibler des éléments en fonction de leurs attributs?

Oui, vous pouvez combiner le sélecteur d'enfants avec des sélecteurs d'attribut aux éléments cibles en fonction de leurs attributs. Par exemple, «Div> Input [Type =’ Text ’]» sélectionnera tous les champs d'entrée de texte qui sont des enfants directs d'un div.

Comment le sélecteur d'enfant fonctionne-t-il avec des sélecteurs de classe et d'identification?

Le sélecteur d'enfant peut être utilisé en conjonction avec des sélecteurs de classe et d'identification pour cibler des éléments spécifiques. Par exemple, «#mydiv> .myclass» sélectionnera tous les éléments avec la classe «myclass» qui sont des enfants directs de l'élément avec l'ID «MyDiv».

Puis-je utiliser le sélecteur d'enfants pour cibler uniquement le dernier enfant d'un élément?

Oui, vous pouvez utiliser la pseudo-classe «: dernier-enfant» en combinaison avec le sélecteur d'enfants pour cibler uniquement le dernier enfant d'un élément. Par exemple, «Div> P: Last-Child» ne sélectionnera que le dernier paragraphe qui est un enfant direct d'une div.

Comment le sélecteur d'enfants fonctionne-t-il dans la conception réactive?

Le sélecteur d'enfants peut être utilisé dans la conception réactive pour appliquer différents styles aux éléments en fonction de la taille de leur parent ou d'autres propriétés. Cela peut être utile pour ajuster les dispositions et les styles en fonction de la taille de l'écran ou du type de périphérique.

Puis-je utiliser le sélecteur d'enfants avec des pseudo-éléments?

Oui, vous pouvez utiliser le sélecteur d'enfant avec des pseudo-éléments comme ":: avant" et ":: After". Par exemple, «div> p :: avant» sélectionnera la pseudo-élément «:::» de tous les paragraphes qui sont des enfants directs d'un div.

Comment la spécificité fonctionne-t-elle avec le sélecteur d'enfants?

Dans CSS, la spécificité détermine les styles appliqués lorsqu'il existe des règles conflictuelles. Le sélecteur d'enfants augmente la spécificité d'une règle, ce qui signifie qu'elle remplacera toutes les règles contradictoires avec une spécificité plus faible. Par exemple, «div> p» a une spécificité plus élevée que «p».

Puis-je utiliser le sélecteur d'enfants pour cibler uniquement les enfants étranges ou même les enfants?

Oui, vous pouvez utiliser la pseudo-classe «: nth-enfant» en combinaison avec le sélecteur d'enfants pour cibler uniquement les enfants étranges ou même les enfants. Par exemple, «Div> P: Nth-Child (Odd)» sélectionnera tous les paragraphes impairs qui sont des enfants directs d'un div.

Quel est le support du navigateur pour le sélecteur d'enfants?

Le sélecteur d'enfants est soutenu dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, il n'est pas pris en charge dans les versions Internet Explorer 6 ou plus. Vérifiez toujours la prise en charge actuelle du navigateur lorsque vous utilisez des sélecteurs CSS avancés.

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!