Quelle est la différence entre le premier enfant CSS et le nième enfant

藏色散人
Libérer: 2021-01-08 14:39:41
original
2926 Les gens l'ont consulté

La différence entre CSS first-child et nth-child : 1. first-child est un sélecteur de pseudo-classe, ce qui signifie faire correspondre le premier élément enfant de l'élément parent ; 2. nth-child signifie correspondre au ; nième élément enfant des éléments enfants de l'élément parent.

Quelle est la différence entre le premier enfant CSS et le nième enfant

L'environnement d'exploitation de ce tutoriel : système Windows 7, version css3, ordinateur Dell G3.

Recommandé : "Tutoriel vidéo CSS"

premier-enfant

E : le premier-enfant est une pseudo-classe selector ,

correspond au premier élément enfant E de l'élément parent

Il ressort de la description que E est le premier élément enfant que vous souhaitez sélectionner, pas l'élément parent. Au début, je pensais à tort que E:first-child était le premier élément enfant de E.

:nth-child(n)

Correspond au nième élément enfant E de l'élément parent

E est également un élément enfant , et également Ne peut correspondre qu'au nième élément enfant sous l'élément parent. n commence à compter à partir de 1

<ul>
  <li>l1</li>
  <li>l2</li>
  <li>l3</li>
</ul>
Copier après la connexion

Pour sélectionner

  • l1
  • ul>li:first-child

    Pour sélectionner

  • l2
  • ul>li:nth -child(2)

    <div>
        <h1>h1</h1>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
    </div>
    Copier après la connexion

    À ce moment, sélectionnez le premier élément p, et une erreur se produira lors de l'application de p:first-child, car l'élément parent de p est div, et pour div , son premier L'élément enfant n'est pas p, mais h1, donc si le sélecteur p:first-child, une erreur se produira.

    De même, E:last-child``E:only-child est le même que ci-dessus. L'élément E doit être le dernier élément enfant ou le seul élément enfant de son élément parent

    Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

    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!

    Étiquettes associées:
    css
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal