Comment utiliser des CSS purs pour obtenir l'effet des couleurs des éléments alternés par n% 3?

CSS pur réalise l'effet N% 3 cycle de la couleur des éléments

Dans le développement frontal, il est souvent nécessaire d'allouer dynamiquement les couleurs en fonction des positions des éléments, telles que la réalisation de l'effet des cycles de couleur par n% 3. Cet article expliquera comment réaliser cet effet en utilisant CSS uniquement.

Supposons que la structure HTML est la suivante:

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

L'objectif est de faire changer cycliquement la couleur de l'élément P en fonction de sa position (n% 3 résultat): n% 3 == 0 est la couleur 1, n% 3 == 1 est la couleur 2, et n% 3 == 2 est la couleur 3.

Tout d'abord, définissez la variable CSS pour stocker la valeur de la couleur:

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

Ensuite, utilisez nth-child Pseudo-Class et la var() calc() pour appliquer dynamiquement la couleur:

 .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);
}

Dans le code, 3n 1 , 3n 2 , 3n 3 sélectionnent des éléments qui satisfont n% 3 == 0, n% 3 == 1, n% 3 == 2, respectivement, et appliquent des couleurs prédéfinies via la fonction var() . De cette façon, la couleur d'arrière-plan de chaque élément p cyclinera automatiquement en fonction de sa position dans .container , et l'effet de boucle de couleur N% 3 de CSS pur peut être réalisé sans 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!