Wie verwendet ich reine CSS, um den Effekt von Wechselelementfarben im N%3 -Modus zu erzielen?

Reines CSS implementiert die Farbwechsel der Elementfarbe

In diesem Artikel wird die Verwendung von reinem CSS verwendet, um den Effekt von Alternationselementfarben im N%3 -Modus basierend auf dem Elementindex zu erreichen. Diese Technik ist sehr nützlich, wenn visuell ansprechende Listen oder Gitterlayouts erstellt werden.

Angenommen, wir haben die folgende HTML -Struktur:

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

Und CSS -Variable Definition:

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

Unser Ziel ist es, jeden zu machen<p> Die Hintergrundfarbe des Elements ändert sich zyklisch nach dem Rest von <code>n%3 :

• Element 1: --color1
• Element 2: --color2
• Element 3: --color3
• Element 4: --color1
• Und so weiter...

Die Pseudoklasse von CSS ' nth-child kann dies erreichen. Indem wir die Syntax von nth-child geschickt anwenden, können wir bestimmte Elemente auswählen und verschiedene Stile anwenden.

Lösung:

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

Dieser CSS-Code verwendet nth-child(3n x) -Schiffer:

• 3n 1 Wählen Sie alle Indizes geteilt durch 3 Rest 1 (1, 4, 7, ...)
• 3n 2 2wählen Sie alle Indizes geteilt durch 3 Elemente mit Rest von 2 (2, 5, 8, ...)
• 3n 3 Wählen Sie alle Indizes geteilt durch 3 Elemente mit Rest von 0 (3, 6, 9, ...)

Durch den oben genannten CSS -Code haben wir ihn erfolgreich implementiert<p> Der kreisförmige alternierende Effekt von Element -Hintergrundfarben entspricht <code>n%3 -Modus. Diese Methode ist einfach und effizient und wird mit reinem CSS vollständig implementiert, wodurch der zusätzliche Overhead von JavaScript vermieden wird.

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