Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3

Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont les positions sont supérieures ou égales à 3. Les exemples de code spécifiques sont les suivants :

Code HTML :

<div id="container">
  <div class="item">第一个子元素</div>
  <div class="item">第二个子元素</div>
  <div class="item">第三个子元素</div>
  <div class="item">第四个子元素</div>
  <div class="item">第五个子元素</div>
  <div class="item">第六个子元素</div>
  <div class="item">第七个子元素</div>
</div>

Code CSS :

.item:nth-child(n+3) {
  color: red;
}

Explication :
Dans le code ci-dessus, nous utilisons le sélecteur nième-enfant(n+3) pour sélectionner les éléments enfants dont la position est supérieure ou égale à 3, et définir la couleur du texte de ces éléments enfants au rouge.

: le sélecteur de pseudo-classe nth-child(n+3) signifie sélectionner les éléments enfants dont la position est supérieure ou égale à 3. Parmi eux, n représente n'importe quel nombre naturel, et +3 représente le comptage à partir du 3ème sous-élément.

Dans le code ci-dessus, nous définissons l'identifiant de l'élément conteneur sur "conteneur" et le nom de classe de l'élément enfant sur "item". Utilisez ensuite CSS pour définir la couleur du texte des éléments enfants supérieurs ou égaux à la position 3 sur rouge.

Résultat :
Selon le code ci-dessus, la couleur du texte du troisième élément enfant, du quatrième élément enfant, du cinquième élément enfant et des éléments enfants suivants sera définie sur rouge, tandis que la couleur du texte des deux premiers éléments enfants sera restent par défaut.

L'utilisation du sélecteur de pseudo-classe nième enfant (n+3) peut facilement sélectionner des éléments enfants avec des positions supérieures ou égales à 3 et définir leurs styles en conséquence. Ceci est très utile pour certains besoins de mise en page spécifiques et peut nous aider à mieux obtenir des effets de page.

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!