: Premier enfant (sélecteur CSS)

Description

Cette pseudo-classe correspond à un élément uniquement s'il s'agit du premier élément enfant de son élément parent. Par exemple, Li: First-Child correspond au premier élément de liste dans un élément OL ou UL. Il ne correspond pas au premier enfant d'un élément de liste. Par exemple, prenons le sélecteur CSS mentionné ci-dessus:

li:first-child {
  ⋮ <span>declarations
</span>}

Et appliquons-le au balisage suivant:

<ul>
  <li>This item matches the selector li:first-child.</li>
  <li>This item does not match that selector.</li>
  <li>Neither does this one.</li>
</ul>

Seul le premier élément de l'élément de liste est correspondant. Notez que cette pseudo-classe ne s'applique qu'aux éléments - elle ne s'applique pas aux boîtes anonymes générées pour le texte.

Exemple

Cet exemple de sélecteur correspond au Première liste élément dans un OL ou UL élément:

li:first-child {
  ⋮ <span>declarations
</span>}

Questions fréquemment posées (FAQ) sur CSS: sélecteur de premier enfant

Quelle est la différence entre: premier-enfant et: premier de type dans CSS?

Le: le premier sélecteur de l'enfant dans CSS cible le premier élément enfant de son parent. Il ne considère pas le type d'élément. Par exemple, si vous avez un élément DIV suivi d'un élément P à l'intérieur d'un élément parent, en utilisant: First-Child ciblera l'élément DIV car il s'agit du premier enfant de son parent.

D'un autre côté,: premier de type cible la première occurrence d'un type spécifique d'élément au sein de son parent. Donc, si vous utilisez: premier de type pour un élément P, il ciblera le premier élément P, que ce soit le premier enfant de son parent ou non.

Puis-je utiliser le: Selecteur de premier enfant avec classes? Par exemple, si vous souhaitez sélectionner le premier enfant d'une classe spécifique, vous pouvez utiliser la syntaxe «.classname: premier-enfant». Cela sélectionnera le premier élément enfant de la classe «ClassName».

Comment le sélecteur: Premier enfant fonctionne-t-il avec des éléments imbriqués?

Le: Selecteur de l'enfant premier considère uniquement les enfants directs d'un élément parent. S'il y a des éléments imbriqués, il ne les considérera pas. Par exemple, si vous avez un élément DIV à l'intérieur d'un autre élément DIV et que vous utilisez le: premier sélecteur-enfant, il ne considérera que le premier élément div, pas le imbriqué.

Y a-t-il un: dernier sélecteur de l'enfant dans CSS?

Oui, il y a un: dernier sélecteur-enfant dans CSS? Il fonctionne de manière similaire au: Sélecteur de premier enfant, mais au lieu de sélectionner le premier enfant d'un élément parent, il sélectionne le dernier enfant.

Puis-je utiliser le sélecteur de premier enfant avec des pseudo-éléments?

Non, vous ne pouvez pas utiliser le sélecteur de premier enfant avec des pseudo-éléments. Les pseudo-éléments sont utilisés pour styliser des parties spécifiques d'un élément, comme la première lettre ou la ligne d'un bloc de texte, et ils ne sont pas considérés comme des enfants d'un élément.

Comment le sélecteur: Premier enfant est-il utilisé dans la conception réactive?

Le sélecteur: Premier enfant peut être utilisé dans la conception réactive pour styliser le premier élément enfant différemment en fonction de la taille de l'écran. Par exemple, vous pouvez l'utiliser pour modifier la couleur, la taille de la police ou la disposition du premier élément enfant lorsque la taille de l'écran change.

Puis-je combiner le: premier sélecteur de l'enfant avec d'autres sélecteurs?

Oui, vous pouvez combiner le: premier sélecteur-enfant avec d'autres sélecteurs dans CSS. Par exemple, vous pouvez l'utiliser avec le sélecteur de classe pour cibler le premier enfant d'une classe spécifique, ou avec le sélecteur d'éléments pour cibler le premier enfant d'un type spécifique d'élément.

Le sélecteur de premier enfant a-t-il: le sélecteur de premier enfant est-il soutenu par tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, il n'est pas pris en charge par Internet Explorer 8 et les versions antérieures.

Puis-je utiliser le: Selecteur de premier enfant pour cibler les nœuds de texte?

Non, le: le sélecteur de premier enfant ne peut pas cibler les nœuds de texte. Il ne peut cibler que les nœuds d'élément. Si vous souhaitez styliser des nœuds de texte, vous devez les envelopper dans un élément, puis cibler cet élément.

Comment le sélecteur de l'enfant est-il: le sélecteur en premier gère-t-il l'espace blanc?

Le sélecteur: premier enfant ignore-t-il Whitespace. Il ne considère que les nœuds d'élément, pas les nœuds de texte. Donc, si vous avez un espace blanc avant le premier élément enfant, cela n'affectera pas le: premier sélecteur de l'enfant.

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!