Comment sélectionner le premier élément avec le sélecteur CSS

Comment sélectionner le premier élément dans le sélecteur CSS : 1. Utilisez le sélecteur "first-child" pour sélectionner le premier élément enfant appartenant à son élément parent 2. Utilisez "last-child" pour sélectionner le ; dernier élément de la liste Une étiquette ; 3. Utilisez "nth-child(3)" pour sélectionner la 3ème étiquette et ainsi de suite.

L'environnement d'exploitation de cet article : système Windows7, version HTML5&&CSS3, ordinateur Dell G3.

Quel élément est sélectionné à l'aide d'un sélecteur en CSS ?

Comment utiliser le sélecteur pour sélectionner quel élément en CSS ? L'article suivant vous expliquera comment utiliser les sélecteurs CSS pour obtenir l'effet de sélection du premier élément. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Dans le développement front-end, nous pouvons rencontrer de tels besoins : nous voulons que la première partie de la liste affiche des styles différents, nous voulons que les parties paires de la liste affichent des couleurs d'arrière-plan différentes, nous voulons que les liste pour afficher différentes couleurs d'arrière-plan. La dernière partie du style est différente... Comment pouvons-nous répondre à cette exigence ?

En fait, si le fichier précédent est développé en PHP, il peut être réalisé via l'instruction de boucle + l'instruction de jugement + le style CSS de PHP. Cependant, s’il s’agit de code statique, PHP ne peut pas être utilisé.

À l'heure actuelle, nous pouvons également l'implémenter via CSS. CSS nous fournit plusieurs paramètres de style très utiles : first-child, last-child, nth-child(n). Ci-dessous, examinez de plus près leur utilisation.

1. premier enfant

Le sélecteur de premier enfant est utilisé pour sélectionner le sélecteur spécifié qui appartient au premier élément enfant de son élément parent.

Sélectionnez la couleur d'arrière-plan du premier module li dans la liste li.

li:first-child{background:#090}

2, last-child

last-child représente la dernière balise de la liste de sélection, le code est le suivant :

li:last-child{background:#090}

3, nième-enfant(3 )

signifie sélectionner la troisième étiquette, le code est le suivant :

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

Le 3 dans le code ci-dessus peut également être remplacé par d'autres nombres, tels que 4, 5, etc. Si vous souhaitez choisir une étiquette, remplissez simplement le numéro.

4. nth-child(2n)

Cela signifie sélectionner les balises paires dans la liste, c'est-à-dire sélectionner les 2ème, 4ème, 6ème... balises.

5. nième-enfant (2n-1)

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

6. nième-enfant(n+3)

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

7. nth-child(-n+3)

Cela signifie que les étiquettes dans la liste de sélection sont de 0 à 3, c'est-à-dire des étiquettes inférieures à 3.

8. nth-last-child(3)

Cela représente l'avant-dernière balise de la liste de sélection.

Recommandé : "Tutoriel vidéo CSS"

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!