A quoi sert le nième enfant ?

Comment utiliser nth-child : 1. Pour sélectionner un nombre pair d'éléments, vous pouvez utiliser nth-child(even); 2. Pour sélectionner un nombre impair d'éléments, vous pouvez utiliser nth-child(impair); . Pour sélectionner un élément à une position spécifique, vous pouvez utiliser un index de position spécifique ; 4. Pour sélectionner une certaine plage d'éléments, vous pouvez utiliser : nth-child(-n+3) {font-weight: bold;}.

nth-child est un sélecteur de pseudo-classe en CSS, utilisé pour sélectionner des éléments enfants à des positions spécifiques dans l'élément parent. Dans cet article, nous présenterons l'utilisation du nième enfant et quelques scénarios d'application courants.

1. Syntaxe de base

La syntaxe du nième enfant est la suivante :

父元素:nth-child(n)

Parmi eux, l'élément parent représente l'élément parent à sélectionner, et n représente la position de l'élément enfant à sélectionner.

Remarque : Les positions sont comptées à partir de 1.

2. Exemples d'utilisation

Ci-dessous, nous présenterons l'utilisation de nième-enfant à travers quelques exemples spécifiques.

1. Sélectionnez un nombre pair d'éléments

Si vous souhaitez sélectionner tous les éléments enfants pairs sous l'élément parent, vous pouvez utiliser nième enfant (pair).

Par exemple, pour sélectionner toutes les lignes paires d'une liste, vous pouvez utiliser le code suivant :

li:nth-child(even) {
background-color: #ccc;
}

2 Sélectionnez les éléments impairs

Si vous souhaitez sélectionner tous les éléments enfants impairs sous l'élément parent. , vous pouvez utiliser nth-child (impair).

Par exemple, pour sélectionner toutes les lignes impaires d'un tableau, vous pouvez utiliser le code suivant :

tr:nth-child(odd) {
background-color: #ccc;
}

3. Sélectionnez des éléments à des positions spécifiques

Si vous souhaitez uniquement sélectionner des éléments enfants à une position spécifique sous le parent. élément, vous pouvez utiliser un index de position spécifique.

Par exemple :

Pour sélectionner le premier élément de la liste, vous pouvez utiliser :

li:nth-child(1) {
color: red;
}

Pour sélectionner le dernier élément de la liste, vous pouvez utiliser :

li:nth-child(n):last-child {
color: blue;
}

4 Sélectionnez une certaine plage d'éléments

nième. -child Vous pouvez également utiliser des formules pour sélectionner une plage d'éléments.

Par exemple :

Pour sélectionner les trois premiers éléments enfants sous un élément parent, vous pouvez utiliser :

nth-child(-n+3) {
font-weight: bold;
}

Pour sélectionner les cinq derniers éléments enfants sous un élément parent, vous pouvez utiliser :

nth-child(n+6):nth-child(-n+10) {
font-style: italic;
}

3. Notes

Il y a plusieurs choses à noter lors de l'utilisation de nth-child :

1. L'élément parent doit être un élément du même type. nth-child ne peut sélectionner que des éléments enfants du même type. Par exemple, le premier div et le premier span sous un élément parent ne peuvent pas être sélectionnés.

2. L'ordre des sélecteurs de pseudo-classes est important. Si le sélecteur de nième enfant est utilisé plusieurs fois dans la même feuille de style, les règles suivantes écraseront les règles précédentes.

3. Le nième enfant commence à compter à partir de 1, pas à partir de 0. Ceci est différent de la façon dont le comptage est effectué dans certains langages de programmation, veuillez noter la différence.

4. Résumé

nth-child est un puissant sélecteur CSS En utilisant différents paramètres de position, vous pouvez sélectionner des éléments enfants à des positions spécifiques dans l'élément parent. Qu'il s'agisse de sélectionner des éléments à une position spécifique ou de sélectionner des éléments dans une certaine plage, le nième enfant peut nous aider à y parvenir rapidement.

Cependant, vous devez vous rappeler que l'utilisation de nth-child doit respecter certaines règles, notamment l'élément parent doit être un élément du même type. J'espère que cet article vous aidera à comprendre et à utiliser correctement nth-child. .

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!