Maison > interface Web > tutoriel HTML > le corps du texte

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

零下一度
Libérer: 2017-05-10 15:16:47
original
2262 Les gens l'ont consulté

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

伪类选择器 E:nth-child(n)、E:nth-of-type(n)0

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é

伪类选择器 E:nth-child(n)、E:nth-of-type(n)1

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!

Étiquettes associées:
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