Wie kann ich jedes N-te Element mit dem :nth-child()-Selektor von CSS auswählen?

Jedes N-te Element mit CSS auswählen

Wenn Sie mit einer Gruppe von Elementen arbeiten, möchten Sie möglicherweise jedes N-te Element als Ziel auswählen. CSS bietet den Selektor :nth-child(), um diese Aufgabe zu erleichtern.

:nth-child(n) ermöglicht Ihnen die Auswahl des n-ten untergeordneten Elements innerhalb eines übergeordneten Elements. Es ist möglich, einen n-ten Wert anzugeben und arithmetische Operationen wie Addition, Subtraktion und Koeffizientenmultiplikation durchzuführen.

div:nth-child(4)

Dieser Selektor wählt das vierte div-Element aus. Es erfordert jedoch das Schreiben einzelner Selektoren für jedes n-te Element.

:nth-child(an) vereinfacht diesen Prozess erheblich. Das „a“ stellt einen Koeffizienten dar, der mithilfe arithmetischer Operationen auf „n“ angewendet werden kann:

div:nth-child(4n)

Dieser Selektor wählt jedes vierte div-Element aus und ersetzt so effektiv die Notwendigkeit mehrerer Selektoren.

Zur besseren Kontrolle können arithmetische Ausdrücke im Selektor verwendet werden:

• :nth-child(an b)
• :nth-child(an - b)
• :nth-child(a*n)

Beispiel: Zu Wählen Sie nur div-Elemente aus, ausgenommen andere Elemente wie h1 oder p, verwenden Sie stattdessen :nth-of-type() :nth-child():

body div:nth-of-type(4n)

Hinweis: Wenn n weggelassen wird, wird standardmäßig 1 verwendet und jedes Element ausgewählt.

Unterschied zwischen 4n und 4n 4:

Während beide Selektoren mit jedem vierten div-Element übereinstimmen, gibt es einen subtilen Unterschied Unterschied in ihrem Startpunkt.

• :nth-child(4n) beginnt bei 0 zu zählen, sodass Elemente an den Positionen 4, 8, 12 usw. ausgewählt werden.
• :nth-child(4n 4) beginnt mit dem Zählen bei 4 und wählt daher Elemente an Position 4 aus. 8, 12 usw.

Das obige ist der detaillierte Inhalt vonWie kann ich jedes N-te Element mit dem :nth-child()-Selektor von CSS auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!