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électionner
Pour sélectionner
<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!