Wie verwendet ich reine CSS, um den Effekt von Wechselelementfarben durch n%3 zu erzielen?

Reines CSS realisiert den n%3 -Zyklusffekt der Elementfarbe

In der Front-End-Entwicklung ist es häufig notwendig, Farben dynamisch nach Elementpositionen zuzuweisen, z. In diesem Artikel wird erklärt, wie dieser Effekt nur mit CSS erzielt werden kann.

Angenommen, die HTML -Struktur lautet wie folgt:

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

Ziel ist es, die P -Element -Farbe nach seiner Position zyklisch zu ändern (N%3 Ergebnis): N%3 == 0 ist Farbe 1, N%3 == 1 ist Farbe 2 und N%3 == 2 ist Farbe 3.

Definieren Sie zunächst die CSS -Variable, um den Farbwert zu speichern:

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

Verwenden Sie dann nth-child und die var() calc() um die Farbe dynamisch anzuwenden:

 .Container p: n-te-Kind (3n 1) {
  Hintergrundfarbe: var (-color1);
}

.Container P: N-te-Kind (3n 2) {
  Hintergrundfarbe: var (-color2);
}

.Container p: n-te-Kind (3n 3) {
  Hintergrundfarbe: var (-color3);
}

In dem Code 3n 1 , 3n 2 , 3n 3 Wählen Sie Elemente aus, die n%3 == 0, n%3 == 1, n%3 == 2 erfüllen und vordefinierte Farben über die Funktion var() anwenden. Auf diese Weise zykliert die Hintergrundfarbe jedes P -Elements automatisch nach seiner Position im .container , und der N%3 -Farbschleifeneffekt von reinem CSS kann ohne JavaScript erreicht werden.

Das obige ist der detaillierte Inhalt vonWie verwendet ich reine CSS, um den Effekt von Wechselelementfarben durch n%3 zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!