Die Tabelle verwendet: nth-child(), um abwechselnde Farbänderungen und Ausrichtungen zu erreichen

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.
Derzeit können Sie den untergeordneten Selektor CSS:nth-child() verwenden, um verschiedene Stile hinzuzufügen und so für verschiedene Spalten unterschiedliche Anzeigeeffekte festzulegen.

        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.
Zu beachten ist, dass das erste untergeordnete Element 1 ist und nicht bei 0 beginnt. Beispielsweise ist der Stil der ersten Monatsspalte oben festgelegt und der Parameter :nth-child ist 1.

 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.
Die folgenden Einstellungen entsprechen der Verwendung von „even“.

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.
Warum -n? Tatsächlich können wir aus der Formel -n + 5 ≥ 0 ableiten, dass n ≤ 5, was 1~5 bedeutet.

Nachfolgend eine Ergänzung

CSS3: 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()“.
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()“.

Grammatik:

:n-tes-Kind(an+b)

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

:n-tes-Kind(Zahl)

Stimmt direkt mit dem nummerierten Element überein. Der Zahlenparameter muss eine Ganzzahl größer als 0 sein.

Beispiel:

li:nth-child(3){background:orange;}/*Setze den Hintergrund des dritten LI auf orange*/

Zweite Methode: Mehrfachschreiben

:n-tes Kind(ein)

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:

li:nth-child(3n){background:orange;}/*Setze den Hintergrund des 3., 6., 9., ... und aller LIs, die ein Vielfaches von 3 sind, auf Orange*/

Der dritte Typ: Mehrfachgruppen-Matching

:n-tes Kind(an+b) vs. :n-tes Kind(an-b)

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:

li:nth-child(3n+1){background:orange;}/*Ordne das erste, vierte, siebte, ... und erste LI in jeder Dreiergruppe zu*/
li:nth-child(3n+5){background:orange;}/*Ordne das 5., 8., 11., ... und das erste LI in jeder 3er-Gruppe ab dem 5. zu*/
li:nth-child(5n-1){background:orange;}/*Match 5th-1=4, 10th-1=9, ..., Vielfache von 5 minus 1 LI*/
li:nth-child(3n±0){background:orange;}/*entspricht (3n)*/
li:nth-child(±0n+3){background:orange;}/*entspricht (3)*/

Viertens: Umgekehrtes Mehrfachgruppen-Matching

:n-tes-Kind(-an+b)

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:

li:nth-child(-3n+8){background:orange;}/*entspricht dem 8., 5. und 2. LI*/
li:nth-child(-1n+8){background:orange;}/* oder (-n+8), passt zu den ersten 8 (einschließlich des 8.) LIs. Dies ist praktischer und wird häufig verwendet, um die ersten N Übereinstimmungen einzuschränken.*/

Fünftens: Odd-even Matching

:nth-child(odd) und :nth-child(even)

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:

.table > tr:nth-child(even) > td {background-color: #ccc;} (gerade Zeilen)
.table > tr:nth-child( odd ) > td {background-color: #ccc;} (ungerade Zeilen)

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

Methode der Iframe-Anpassung im webresponsiven Layout

Problem <br />Bei responsivem Layout sollte...

Zusammenfassung der Verwendung des CSS-Bereichs (Stilaufteilung)

1. Verwendung des CSS-Bereichs (Stilaufteilung) I...

Best Practices-Handbuch zum Speichern von Daten in MySQL

Inhaltsverzeichnis Vorwort Verwenden Sie keine Ze...

So implementieren Sie den neuen Operator von JavaScript selbst

Inhaltsverzeichnis Konstruktor neuer Operator Imp...

Analyse der Gründe, warum das MySQL-Indexsystem den B + -Baum verwendet

Inhaltsverzeichnis 1. Was ist ein Index? 2. Warum...

JavaScript zum Implementieren einer einfachen Uhr

In diesem Artikelbeispiel wird der spezifische Co...

CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen

Beschreibung: Begrenzen Sie die Anzahl der Textze...

LayUI+Shiro implementiert ein dynamisches Menü und erinnert sich an das Beispiel der Menüerweiterung

Inhaltsverzeichnis 1. Maven-Abhängigkeit 2. Menüb...

So ändern Sie das Standardnetzwerksegment der Docker0-Brücke in Docker

1. Hintergrund Wenn der Docker-Dienst gestartet w...

Detaillierte Erläuterung der bidirektionalen Bindung von Vue

Inhaltsverzeichnis 1. Zwei-Wege-Bindung 2. Wird d...

Praktisches Beispiel einer virtuellen Vue-Liste

Inhaltsverzeichnis Vorwort Design erreichen Zusam...

Detaillierte Erklärung der Kernkonzepte und der grundlegenden Verwendung von Vuex

Inhaltsverzeichnis einführen Start Installieren ①...

Eine detaillierte Einführung in die Grundlagen des Linux-Scriptings

Inhaltsverzeichnis 1. Skript-Vim-Umgebung 2. So d...

Implementierung eines Web-Rechners auf Basis von JavaScript

In diesem Artikel wird der spezifische JavaScript...

Eine "klassische" Falle der MySQL UPDATE-Anweisung

Inhaltsverzeichnis 1. Problematische SQL-Anweisun...