Die Tabelle verwendet: nth-child(), um abwechselnde Farbänderungen und Ausrichtungen zu erreichen
|
Kerncode
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Tabelle2n</title>
</Kopf>
<Text>
<Stil>
Tisch {
Rand: 30px automatisch;
Rand: #aaa 4px doppelt;
Rahmenkollaps: trennen;
Rahmenabstand: 0px;
}
td,th {
Polsterung: 5px;
Breite: 50px;
Rahmenfarbe: #ddd;
Rahmenbreite: 1px;
Rahmenstil: durchgezogen;
}
tr:n-tes Kind (gerade) {
Hintergrund: #eee;
}
</Stil>
<Tabelle>
<tr><th>Monat</th><th>Finanzmanagement</th><th>Gehalt</th> <th>Manuskriptgebühr</th><th>Gesamteinkommen</th><th>Leben</th><th>Einkaufen</th><th>Telefongebühr</th><th>Transport</th><th>Gesamtausgaben</th></tr>
<tr><td>Januar</td><td>100</td><td>200</td><td>400</td><td>700</td><td>200</td><td>500</td><td>100</td><td>200</td><td>1000</td></tr>
<tr><td>Februar</td><td>300</td><td>400</td><td>100</td><td>800</td><td>50</td><td>70</td><td>200</td><td>30</td><td>350</td></tr>
<tr><td>März</td><td>20</td><td>1000</td><td>200</td><td>1220</td><td>130</td><td>92</td><td>20</td><td>43</td><td>285</td></tr>
<tr><td>April</td><td>125</td><td>72</td><td>128</td><td>325</td><td>42</td><td>13</td><td>20</td><td>200</td><td>275</td></tr><tr>
<td>Mai</td><td>100</td><td>200</td><td>400</td><td>700</td><td>200</td><td>500</td><td>100</td><td>200</td><td>1000</td></tr>
<tr><td>Juni</td><td>300</td><td>400</td><td>100</td><td>800</td><td>50</td><td>70</td><td>200</td><td>30</td><td>350</td></tr>
<tr><td>Juli</td><td>20</td><td>1000</td><td>200</td><td>1220</td><td>130</td><td>92</td><td>20</td><td>43</td><td>285</td></tr>
<tr><td>August</td><td>125</td><td>72</td><td>128</td><td>325</td><td>42</td><td>13</td><td>20</td><td>200</td><td>275</td></tr>
</Tabelle>
</body>
</html>Rendern
Für das obige Beispiel werden nur abwechselnde Zeilenfarben festgelegt. Dadurch wird das Lesen der falschen Zeile verhindert, die Daten in derselben Zeile sind jedoch immer noch verwirrend.
tr>td:n-tes-Kind(-n+5) {
Farbe: grün;
Textausrichtung: rechts;
}
tr>td:n-tes-Kind(n+6) {
Farbe: rot;
Textausrichtung: rechts;
}
tr>td:n-tes-Kind(1) {
Schriftstärke: fett;
Farbe: Schwarz;
Textausrichtung: zentriert;
}
tr>td:n-tes-Kind(5),tr>td:n-tes-Kind(10) {
Schriftstärke: fett;
}
Rendern
Nach dem Hinzufügen von Stilen ist es einfacher, die Daten zu interpretieren und Kategorien zu unterscheiden, wobei Monate fett gedruckt sind, Rot für Ausgaben, Grün für Einnahmen usw. steht. Gemäß der Einführung von CSS entspricht der Selektor :nth-child(n) dem N-ten untergeordneten Element seines übergeordneten Elements, unabhängig vom Elementtyp, und n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.
tr>td:n-tes-Kind(1) {
…
}
Sie können auch die Konstanten odd und even verwenden, die jeweils ungerade und gerade Zahlen darstellen. Beispielsweise wird die Hintergrundfarbe abwechselnder Zeilen wie folgt festgelegt.
tr:n-tes Kind (gerade) {
Hintergrund: #eee;
}
Um eine kontinuierliche Auswahl oder eine versetzte Auswahl zu erreichen, können Formeln verwendet werden. Die Länge des Zyklus wird mit der Formel (an + b) ausgedrückt, wobei n der Zähler (beginnend bei 0) und b der Offsetwert ist.
tr:ntes-Kind(2n){
Hintergrund: #eee;
}
2n+1 hat die gleiche Wirkung wie odd
tr:n-tes Kind(ungerade){
Hintergrund: #eee;
}
2n+1
tr:n-tes-Kind(2n+1){
Hintergrund: #eee;
}
Die einfache Verwendung von n+b stellt eine kontinuierliche Auswahl dar.
tr>td:n-tes-Kind(-n+5) {
…
}
-n+b ist eine erweiterte Verwendung, bei der vom ersten Punkt an ausgewählt wird, während n+b vom Ende an vorwärts auswählt. Nachfolgend eine ErgänzungCSS3: nth-child()-Pseudoklassenselektor, Tabellentabelle, Definitionsstil für gerade und ungerade Zeilen Die Leistungsfähigkeit von CSS3 ist erstaunlich. Obwohl die Leute überrascht sind, müssen sie den schwierigen Weg bedauern: Ein guter Standard kann nur dann als „Standard“ angesehen werden, wenn er von den Browsern der Branche gut unterstützt wird. Der CSS3-Standard wird seit mehreren Jahren vorgeschlagen, aber es gibt nicht viele Browser, die ihn implementieren können. Obwohl einige Browser einige Spezifikationen implementieren können, was nützt das? Angesichts zunehmender Kompatibilitätsprobleme können CSS-Verwender nur verzweifelt seufzen. Wie können wir als zukunftsorientierte Menschen dennoch aufhören, uns vorwärts zu bewegen? Heute werfen wir einen Blick auf den CSS3-Pseudoklassenselektor „:nth-child()“. Die Leistungsfähigkeit von CSS3 ist erstaunlich. Obwohl die Leute überrascht sind, müssen sie den schwierigen Weg bedauern: Ein guter Standard kann nur dann als „Standard“ angesehen werden, wenn er von den Browsern der Branche gut unterstützt wird. Der CSS3-Standard wird seit mehreren Jahren vorgeschlagen, aber es gibt nicht viele Browser, die ihn implementieren können. Obwohl einige Browser einige Spezifikationen implementieren können, was nützt das? Angesichts zunehmender Kompatibilitätsprobleme können CSS-Verwender nur verzweifelt seufzen. Wie können wir als zukunftsorientierte Menschen dennoch aufhören, uns vorwärts zu bewegen? Heute werfen wir einen Blick auf den CSS3-Pseudoklassenselektor „:nth-child()“. Grammatik:
Warum sie wählen? Weil ich denke, dass diese Auswählerin die kompetenteste ist. Leider sind laut meinem Test die einzigen Browser, die es gut unterstützen, Opera 9+ und Safari 3+. beschreiben: Der Parameter der Pseudoklasse: nth-child() ist an+b. Wenn es gemäß der Beschreibung auf w3.org auf Chinesisch geschrieben wird, kann es bei manchen Leuten Schwindel verursachen. Außerdem sind die Schreibfähigkeiten des Autors begrenzt, also habe ich beschlossen, die an+b-Anweisung zu vermeiden und sie in 5 Teile mit 5 Erklärungsweisen aufzuteilen. Die erste Methode: einfaches Schreiben digitaler Seriennummern
Stimmt direkt mit dem nummerierten Element überein. Der Zahlenparameter muss eine Ganzzahl größer als 0 sein. Beispiel:
Zweite Methode: Mehrfachschreiben
Stimmt mit allen Elementen überein, die ein Vielfaches von a sind. Der Buchstabe n im Parameter an kann nicht weggelassen werden. Er ist ein Symbol für Mehrfachschreibweise, wie zum Beispiel 3n und 5n. Beispiel:
Der dritte Typ: Mehrfachgruppen-Matching
Gruppieren Sie zunächst die Elemente. Jede Gruppe hat a Elemente. b ist die Seriennummer der Mitglieder in der Gruppe. Der Buchstabe n und das Pluszeichen + können nicht weggelassen werden und ihre Positionen können nicht vertauscht werden. Dies ist das Markenzeichen dieser Schreibmethode. a und b sind beide positive ganze Zahlen oder 0. Wie 3n+1, 5n+1. Das Pluszeichen kann jedoch in ein Minuszeichen geändert werden. In diesem Fall stimmt es mit dem a-ten Element in der Gruppe überein. (Tatsächlich kann einem auch ein negatives Vorzeichen vorangestellt werden, aber das überlassen wir dem nächsten Abschnitt.) Beispiel:
Viertens: Umgekehrtes Mehrfachgruppen-Matching
Dabei darf weder ein Negativ noch ein Positiv weggelassen werden, sonst ist es bedeutungslos. Dies ist ähnlich zu :nth-child(an+1), beide stimmen mit dem ersten überein, aber der Unterschied besteht darin, dass es rückwärts zählt, beginnend beim b-ten und zurückzählend, sodass es höchstens mit mehr als b Kindern übereinstimmt. Beispiel:
Fünftens: Odd-even Matching
Stimmt mit Elementen mit geraden bzw. ungeraden Zahlen überein. Eine ungerade Zahl (odd) hat dasselbe Ergebnis wie (2n+1); eine gerade Zahl (even) hat dasselbe Ergebnis wie (2n+0) und (2n). Standpunkt des Autors: Der Stil der ungeraden und geraden Zeilen der Tabelle kann wie folgt geschrieben werden:
Dies ist das Ende dieses Artikels über die Verwendung von :nth-child() in einer Tabelle, um abwechselnde Zeilenfarbänderungen und -ausrichtungen zu erreichen. Weitere relevante Inhalte zu Tabellen mit nth-child finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: So installieren Sie Element UI und verwenden Vektorgrafiken in vue3.0
>>: Implementierungscode der schwebenden Ebene, die auf der rechten Seite der Webseite fixiert ist
Artikel empfehlen
js implementiert das Hinzufügen und Entfernen von Warenkörben sowie die Preisberechnung
In diesem Artikelbeispiel wird der spezifische JS...
Detaillierte Erläuterung des zeitaufwändigen SQL-Beispiels für MySQL-Datensätze
MySQL zeichnet zeitaufwändiges SQL auf MySQL kann...
Detaillierte Erklärung zur Verwendung des Feldsatzes und der Legende für seltene Tags
Was <fieldset> und <legend> betrifft,...
Detaillierte Erklärung zur Verwendung des MySQL-Sicherungsskripts mysqldump
In diesem Artikel wird das MySQL-Sicherungsskript...
Erklärung der horizontalen und vertikalen Tabellenpartitionierung von MySQL
In meinem vorherigen Artikel habe ich gesagt, das...
Zwei Möglichkeiten zum Verwalten von Volumes in Docker
Im vorherigen Artikel habe ich die Grundkenntniss...
Tutorial zur Installation von MySQL 5.7.18 auf Mac OS 10.12
Ich habe das ganze Internet durchsucht und bin au...
Lösen Sie das Gruppieren-nach-Abfrage-Problem nach dem Upgrade von Mysql auf 5.7
Finden Sie das Problem Nach dem Upgrade von MySQL...
Tutorial zur Installation und Verwendung von virtualenv in Deepin
virtualenv ist ein Tool zum Erstellen isolierter ...
So unterscheiden Sie MySQLs innodb_flush_log_at_trx_commit und sync_binlog
Die beiden Parameter innodb_flush_log_at_trx_comm...
Native JS-Kapselung, nahtlose Karussellfunktion
Natives js-gekapseltes nahtloses Karussell-Plug-I...
Sublime/vscode – schnelle Implementierung zur Generierung von HTML-Code
Inhaltsverzeichnis Grundlegende HTML-Struktur Gen...
Hinweise zum Import, Export und zur Migration von MySQL Billions of Data
Ich habe in letzter Zeit viele MySQL-Notizen gema...
MySQL-Sortierung nach konventioneller Sortierung, benutzerdefinierter Sortierung und Sortierung nach chinesischen Pinyin-Buchstaben
Normale MySQL-Sortierung, benutzerdefinierte Sort...
Implementierung des Deployment-War-Package-Projekts mit Docker
Um War mit Docker bereitzustellen, müssen Sie ein...