Quelle est la différence entre CSS nième-de-type et nième-enfant ?

Différence : les deux éléments correspondants sont différents. Le sélecteur ":nth-of-type(n)" correspond au Nième élément enfant d'un type spécifique qui appartient à l'élément parent. et Le sélecteur ":nth-child(n)" correspond au Nième élément enfant appartenant à son élément parent, et le type d'élément n'est pas limité.

(Tutoriel recommandé : Tutoriel vidéo CSS)

Sélection :nth-child(). Sélecteur

:nth-child(n) selector correspond au Nième élément enfant appartenant à son élément parent, quel que soit le type d'élément, n peut être un nombre, un mot-clé ou une formule.

2. :nth-of-type(n)
:nth-of-type(n) le sélecteur correspond au Nième élément enfant d'un type spécifique qui appartient au parent element, Il n'y a aucune restriction sur les types d'éléments ; n peut être un nombre, un mot-clé ou une formule.

3. Différences spécifiques

Premier coup d'oeil au code

p:ntième de -type (7) Le 7ème élément P sous l'élément parent où se trouve l'élément p sélectionné est : <p>第7个p</p>

p:nth-child (6) Le parent où est sélectionné L'élément p est situé Le 6ème élément enfant sous l'élément, et l'élément est un élément P, c'est-à-dire : <p>第5个p</p>

Le résultat

4. impair et pair sont des mots-clés qui peuvent être utilisés pour faire correspondre des sous-éléments dont les indices sont impairs ou pairs
impair sélectionne un nombre impair et pair sélectionne un nombre pair <.>

1. :nth -child(impair)

L'exemple ci-dessus p:nth-child(impair) : sélectionne les éléments impairs sous l'élément parent de P Et l'élément est un élément P, donc c'est

et <p>第二个段落。</p> (p:nth-child(n) n=3 et n=5) <p>第四个段落。</p>

:nth-child(even)

-L'exemple ci-dessus p:nth-child(even) : l'élément pair sous l'élément parent de P est sélectionné et l'élément est un élément P, il s'agit donc de et <p>第一个段落。</p> et <p>第三个段落。</p> ( p:nth-child(n) n=2 et n=4 et n=6) <p>第五个段落。</p>

3. :nth-of-type(impair)

   -L'exemple ci-dessus p:nth-of-type(impair) : L'élément P impair sous le parent l'élément de P est sélectionné, il s'agit donc de
   et <p>第一个段落。</p> et <p>第三个段落。</p> ( p:nth-of-type(impair) n=1 et n=3 et n=5) <p>第五个段落。</p>

4. :nth-of-type(even)

   - Dans l'exemple ci-dessus p:nth-of-type(even) : les éléments P pairs sous le les éléments parents de P sont sélectionnés, ils sont donc
   et <p>第二个段落。</p> ( p :nth-of-type(even) n=2 et n=4)<p>第四个段落。</p>

5, :nth-of-type(an+b) et :nth-of-type( an+b ) Les règles sont les mêmes que celles expliquées ci-dessus

a représente la longueur de la période, n est le compteur (à partir de 0), et b est la valeur de décalage.
Par exemple : :nth-of-type( 2n+1) est le 1er, le 3ème et le 5ème élément P

Pour plus de connaissances liées à la programmation, veuillez visitez :

Introduction à 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!