Maison  >  Article  >  interface Web  >  Comment obtenir le premier élément en CSS

Comment obtenir le premier élément en CSS

藏色散人
藏色散人original
2020-11-23 11:22:086571parcourir

Comment obtenir le premier élément en CSS : 1. Obtenez la troisième balise de la liste via la méthode "nth-child(3)" 2. Obtenez la liste via "nth-child(2n) ; " Méthode Les étiquettes paires dans la liste ; 3. Obtenez les étiquettes impaires dans la liste via la méthode "nth-child(2n-1)", etc.

Comment obtenir le premier élément en CSS

L'environnement d'exploitation de ce tutoriel : Système Windows 7, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

CSS sélectionne quel élément d'étiquette : nième-enfant(n), premier-enfant, dernier-enfant

Avant-propos : Aujourd'hui, lors du codage, j'ai rencontré le besoin de sélectionner les deux premiers éléments de balise, de vérifier les informations et de les enregistrer ~

énième enfant (n), premier enfant, dernier -child usage

Remarque : Le sélecteur nth-child(n) correspond au nième élément enfant dans l'élément parent.

n peut être un nombre, un mot-clé ou une formule.

Utilisation du nth-child(n) :

1. nth-child(3)

représente la troisième étiquette dans la liste de sélection, le code est le suivant :

li:nth-child(3){background:#fff}

2, nth-child(2n)

signifie sélectionner les balises paires dans la liste, c'est-à-dire sélectionner les 2ème, 4ème, 6ème... balises. Le code est le suivant. :

li:nth-child(2n){background:#fff}

3. nth-child(2n-1)

signifie sélectionner les balises impaires dans la liste, c'est-à-dire sélectionner les 1ère, 3ème, 5ème, 7ème... balises. le code est le suivant :

li:nth-child(2n-1){background:#fff}

4. nth-child(n+3)

signifie que les balises dans la liste de sélection commencent du 3ème à la fin.

li:nth-child(n+3){background:#fff}

5. nth-child(-n+ 3)

signifie que les balises dans la liste de sélection sont de 0 à 3, c'est-à-dire des balises inférieures à 3. Le code est le suivant :

li:nth-child(-n+3){background:#fff}

6, nth-last-child(3)

représente l'avant-dernière balise de la liste de sélection. Le code est le suivant :

li:nth-last-child(3){background:#fff}

. Utilisation du premier enfant :

1. premier enfant

premier enfant représente la liste de sélection de la première étiquette de . Le code est le suivant :

li:first-child{background:#fff}

utilisation du dernier enfant :

1. dernier enfant

dernier enfant représente la dernière balise de la liste de sélection, le code est comme suit :

li:last-child{background:#fff}

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!

Déclaration:
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