Comment utiliser des CSS purs pour obtenir l'effet des couleurs d'élément alternées en mode n% 3?

CSS pur implémente l'alternance de couleurs de la couleur de l'élément

Cet article présente comment utiliser des CSS purs pour réaliser l'effet des couleurs d'élément alternatives en mode n% 3 en fonction de l'indice des éléments. Cette technique est très utile lors de la création de listes visuellement attrayantes ou de dispositions de grille.

Supposons que nous ayons la structure HTML suivante:

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Et définition variable CSS:

 .Container {
  --Color1: #fff;
  --Color2: # da3838;
  --Color3: RVB (49, 196, 23);
  p {
      / * Autres styles * /
  }
}

Notre objectif est de faire chacun<p> La couleur d'arrière-plan de l'élément change cycliquement en fonction du reste de <code>n%3 :

• Élément 1: --color1
• Élément 2: --color2
• Élément 3: --color3
• Élément 4: --color1
• Et ainsi de suite...

nth-child -classe de CSS peut y parvenir. En appliquant intelligemment la syntaxe de nth-child , nous pouvons sélectionner des éléments spécifiques et appliquer différents styles.

Solution:

 .Container P: Nth-Child (3n 1) {
  Color d'arrière-plan: var (- color1);
}

.Container P: Nth-Child (3n 2) {
  Color d'arrière-plan: var (- color2);
}

.Container P: Nth-Child (3n 3) {
  Color d'arrière-plan: var (- Color3);
}

Ce code CSS utilise nth-child(3n x) Sélecteur:

• 3n 1 Sélectionnez tous les index divisés par 3 autres 1 (1, 4, 7, ...)
• 3n 2 2Selects Tous les index divisés par 3 éléments avec un reste de 2 (2, 5, 8, ...)
• 3n 3 Sélectionnez tous les index divisés par 3 éléments avec le reste de 0 (3, 6, 9, ...)

Grâce au code CSS ci-dessus, nous l'avons implémenté avec succès<p> L'effet alternant circulaire des couleurs d'arrière-plan des éléments répond <code>n%3 . Cette méthode est simple et efficace, et est entièrement implémentée à l'aide de CSS pure, en évitant les frais généraux supplémentaires de JavaScript.

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!