Detaillierte Erläuterung des Beispiels der CSS-Pseudoklasse nth-child()

Dieser Artikel enthält eine detaillierte Erläuterung des Beispiels der CSS-Pseudoklasse nth-child(), damit jeder verstehen kann, was die Pseudoklasse nth-child() leisten kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Die Pseudoklasse nth-child() in CSS3 ist sehr nützlich zum Erstellen formatierter Excel-Stylesheets in HTML. Wird auch zum Erstellen von Rasterlayouts verwendet, ohne auf Tabellen zurückgreifen zu müssen.

Lassen Sie uns zunächst etwas über die Pseudoklasse nth-child() lernen. [Empfohlene verwandte Video-Tutorials: CSS-Tutorial, CSS3-Tutorial! 】

Grundregeln für die Pseudoklasse nth-child():

Die von uns verwendete Syntax lautet: nth-child (a n + b ), wobei a die Frequenz und b der anfängliche Offset ist. Dies erzeugt eine unendliche Reihe beginnend bei n = 0, die jedoch nur positive Werte enthält.

Einige Beispiele könnten dies klarer machen:

2n, 2n + 0
2,4,6,8,10,12......

2n + 1 oder ungerade Zahl
1,3,5,7,9,11......

2n + 2
2,4,6,8,10,12......

2n + 3
3,5,7,9,11,12......

2n + 4
4,6,8,10,12,14......

3n, 3n + 0 oder 3n + 3
3,6,9,12,15,18......

3n + 1
1,4,7,10,13,16…

Sie sehen also, dass die Reihe mit b beginnt und sich dann für jeden Wert um a erhöht. Das Überspringen von Null- oder negativen Ergebnissen bedeutet, dass wir im DOM-Baum nicht zurückblicken können.

Beispiel für die Pseudoklasse nth-child():

Als nächstes werfen wir einen Blick auf die Pseudoklasse nth-child() durch Beispiele Funktion:

Beispiel 1: Wird mit Hover verwendet

Dieses Beispiel verwendet die Pseudoklasse für das n-te Kind und den ~ allgemeinen Geschwisterselektor.

Zuerst erstellen wir das Raster, indem wir einfach mehrere div-Container nach links verschieben und nth-child verwenden, um nach jeweils zehn Boxen eine neue Zeile zu beginnen:

#stage div {
    float: left;
    margin: 5px;
    width: 60px;
    height: 50px;
    background: #efefef;
}
#stage div:hover { background: red; }
#stage div:nth-child(10n+1) { clear: left; }

in HTML haben wir eine ID hinzugefügt jedem Div-Container (#div1, #div2, ..., #div100) und dann ein Hover-Ereignis wie folgt zugewiesen:

#div1:hover ~ div:nth-child(1n) {
   background: yellow; 
}
#div2:hover ~ div:nth-child(2n) {
   background: yellow; 
}
#div3:hover ~ div:nth-child(3n) {
   background: yellow; 
}
#div4:hover ~ div:nth-child(4n) {
   background: yellow; 
}
...

Dies bedeutet, dass, wenn sich der Cursor auf einem Div befindet, jedes n-te Geschwister dieses Divs dies tun wird gelb werden. Wenn sich die Maus beispielsweise über der Zahl 3 (#div3) befindet, wird sie rot und jedes Div, das ein Vielfaches von 3 ist, wird gelb. Probieren Sie es aus, lassen Sie uns den Effekt sehen:

Beispiel 2: Verwenden Sie nth-child, um die Tabelle

in CSS A mehr zu formatieren Ein typisches Beispiel ist die Formatierung von HTML-Tabellen, um sie professioneller aussehen zu lassen. Zum Beispiel: Abwechselnde Spalten- oder Zeilenfarben:

Das Markup ist zwar nicht sehr hübsch, aber sehr einfach und Sie können die Farben leicht ändern. Für den „Tartan“-Tischeffekt verwenden wir eine Hintergrundfarbe mit einer gewissen Alpha-Transparenz. Wenn also die Spaltenfarben (Rot) und die Zeilenfarben (Blau) aufeinandertreffen, entsteht eine dritte Farbe (Lila).

In diesem Beispiel lautet der Tabellenklassenwert „tartan“:

.tartan tr:nth-child(odd) {
    background: rgba(0,0,255,0.5);
}
.tartan td:nth-child(even) {
    background: rgba(255,0,0,0.5);
}

Wenn wir die sich überschneidenden Zellen direkt positionieren möchten, sodass wir andere Farben ohne transparenten Hintergrund angeben können, können wir dies auch tun Verwendung:

.tartan tr:nth-child(odd) td:nth-child(even) {
    background: #fff;
}

Dies gilt für die ungeraden Zellen in allen ungeraden Zeilen und die geraden Zellen in geraden Zeilen der Tabelle. Sehen wir uns den Effekt an:

Bei den oben genannten Stilen sollten Sie beachten, dass wir die Abkürzungsmethode für ungerade und gerade Zahlen verwenden, was das Merken erleichtert.

Zusammenfassung: Das Obige ist die gesamte Einführung in die Verwendung der Pseudoklasse nth-child() in diesem Artikel. Sie können die Pseudoklasse nth-child() selbst verwenden, um Effekte zu erzielen und Ihr Verständnis zu vertiefen . Ich hoffe, es kann jedem beim Lernen helfen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispiels der CSS-Pseudoklasse nth-child(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!