Présentation de 2 sélecteurs de pseudo-classe : E:nth-child(n) et E:nth-of-type(n)

StructurePseudo-class est un nouveau sélecteur de type en CSS3. E:nth-child(n) et E:nth-of-type(n) en sont deux. Une fois que vous comprenez ces deux-là, vous pouvez fondamentalement comprendre les autres frères de leur famille.

Décrivez d'abord ces deux-là en langage texte :

E:nth-child(n) : sélectionnez le nième élément enfant sous l'élément parent, et ce Le type de le nième sous-élément est E,

Il est préférable d'utiliser des exemples après l'avoir décrit en langage

L'exemple ci-dessus est très simple. Analysons brièvement l'instruction span:nth-child(2) dans la feuille de style (en fait, écrire du code ne sera pas si simple, c'est juste pour illustrer le problème) : Tout d'abord, dans l'élément parent Recherchez le deuxième élément dans le parent p. Le deuxième élément du parent p est p, ce qui ne correspond évidemment pas à span. Regardez le deuxième élément du parent p qui se trouve être span. S'il remplit les conditions, le style background-color sera affiché. (ps : je ne sais pas si je comprends ce que j'ai dit...?)

E:nth-of-type(n) :

Sélectionnez l'élément de type E dans le élément parent, et c'est le nième. C'est-à-dire qu'il faut d'abord trouver les éléments enfants de type E dans l'élément parent, puis les retirer séparément pour les trier. L'élément enfant numéroté n en cours de route est l'élément enfant que nous avons filtré

L'exemple ci-dessus peut bien exprimer ce que j'entends par mots. De la même manière, le deuxième élément enfant de l'élément parent est sélectionné, mais le résultat est différent. En termes simples, la différence entre les deux sélecteurs de pseudo-classe est la suivante : E:nth-of-type(n) sélectionne uniquement les sous-éléments de type E. Après avoir fait correspondre le type, je verrai quel nombre et E:nth- ; child(n) sélectionne le nième élément enfant quel que soit le type, puis vérifie si le type est E)

J'ai l'impression que ma capacité d'expression doit être améliorée ! ! ! J'espère que vous comprenez une expression aussi grossière... Haha.

[Recommandations associées]

1.

Tutoriel vidéo HTML en ligne gratuit

2.

Manuel de développement HTML

3.

Tutoriel vidéo html5 original php.cn

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!