Wie kann ich CSS verwenden, um den Zebrafabastustereffekt zu erzielen, die Hintergrundfarbe in alle drei Zeilen der Tabelle zu ändern?

In diesem Artikel wird beschrieben, wie CSS nur zum Erstellen eines Zebramustereffekts von Änderungen von Hintergrundfarben für eine Tabelle mit einer Schleife alle drei Zeilen erstellt wird. Es ist besonders für Umgebungen für mobile Anwendungsentwicklungen geeignet, ohne sich auf JavaScript- oder Fensterobjekte zu verlassen.

In der Entwicklung der mobilen Anwendungen sind schöne Tischstile von entscheidender Bedeutung. Diese Lösung verwendet nth-child Pseudo-Klasse-Selektor von CSS, um die Änderungen der Hintergrundfarbe in drei Zeilen und einer Gruppe geschickt zu erkennen. Wir definieren zwei verschiedene Hintergrundfarben in sechs Funktionen in einem Zyklus.

Der folgende CSS -Code erreicht diesen Effekt:

 .Tisch {
  Grenzkollapse: Zusammenbruch;
}

.table td {
  Grenze: 1PX Solid #ddd;
  Polsterung: 8px; /* Fügen Sie innere Ränder hinzu, um die Lesbarkeit zu verbessern*/
}

.table tr {
  Hintergrundfarbe: #f9f9f9; /* Standard Hintergrundfarbe*///
}

.Table TR: N-te-Kind (6n 1),
.Table TR: N-te-Kind (6n 2),
.Table tr: n-te-Kind (6n 3) {
  Hintergrundfarbe: #ffffff; /* Der erste Satz von drei Zeilen von Hintergrundfarben*/
}

.Table tr: n-Kind (6n 4),
.Table TR: N-te-Kind (6n 5),
.Table tr: n-te-Kind (6n 6) {
  Hintergrundfarbe: #ccccc; /* Der zweite Satz von drei Zeilen von Hintergrundfarben*/
}

Code Erläuterung:

• .table legt den Tischstil fest, um Lücken zwischen den Zellen zu entfernen.
• .table td setzt Zellgrenzen und innere Ränder, um die visuellen Effekte zu verbessern.
• .table tr legt die Standard -Hintergrundfarbe fest.
• :nth-child(6n 1), :nth-child(6n 2), :nth-child(6n 3) Wählen Sie die ersten drei Zeilen jeder sechs Zeilen aus und wenden Sie einen weißen Hintergrund an.
• :nth-child(6n 4), :nth-child(6n 5), :nth-child(6n 6) Wählen Sie die letzten drei Zeilen jeder sechs Zeilen aus und wenden Sie einen grauen Hintergrund an.

Wenden Sie den oben genannten CSS -Code auf Ihren an<table class="table"> Elemente können den Zebra -Mustereffekt von Änderungen von Hintergrundfarben alle drei Zeilen ohne JavaScript -Code erreichen und sind mit verschiedenen mobilen Anwendungsumgebungen kompatibel. Sie können die Hintergrundfarbe und den Wert von <code>6n nach Bedarf anpassen, um die Zyklusperiode und den Stil zu ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS verwenden, um den Zebrafabastustereffekt zu erzielen, die Hintergrundfarbe in alle drei Zeilen der Tabelle zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!