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

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.

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>

Pour sélectionner25edfb22a4f469ecb59f1190150159c6l1bed06894275b65c1ab86501b08a632eb ul>li:first-child

Pour sélectionner25edfb22a4f469ecb59f1190150159c6l2bed06894275b65c1ab86501b08a632eb ul>li:nth -child(2)

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

À 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!