Wie kann ich jedes N-te Element in CSS mit „nth-child()' effizient auswählen?

Auswählen jedes n-ten Elements in CSS

Der nth-child()-Selektor in CSS bietet eine praktische Möglichkeit, bestimmte untergeordnete Elemente in seinem Element anzusprechen übergeordnetes Element. Allerdings kann es umständlich sein, jedes n-te Kind einzeln aufzulisten. Gibt es eine effizientere Methode?

Arithmetische Ausdrücke in nth-child() verwenden

Die wahre Stärke von nth-child() liegt in seiner Fähigkeit, Arithmetik zu integrieren Ausdrücke mit der Variablen „n“. Diese Variable stellt die Position des untergeordneten Elements innerhalb seines übergeordneten Elements dar.

Vereinfachter Selektor für jedes 4. Element

Um jedes vierte div-Element auszuwählen, ersetzen Sie die einzelnen Selektoren durch Folgendes:

div:nth-child(4n)

Dieser Ausdruck bedeutet, dass der Selektor mit jedem div-Element übereinstimmt, das ein Vielfaches von 4 ist (z. B. 0, 4, 8, 12).

Anpassung über Arithmetik

Die Variable n ermöglicht eine weitere Anpassung. Zum Beispiel:

• 2n - 1: Entspricht ungeradzahligen Div-Elementen (z. B. 1, 3, 5).
• 4n 2: Entspricht div-Elementen mit Positionen, die zwei mehr als ein Vielfaches von 4 sind (z. B. 2, 6, 10).

Arithmetische Ausdrücke ausgleichen

Während 4n und 4n 4 auf den ersten Blick identisch erscheinen mögen, sind sie es nicht. nth-child() beginnt mit dem Zählen bei 0. 4n sucht nach Elementen an den Positionen 0, 4, 8, während 4n 4 nach Elementen an den Positionen 4, 8, 12 sucht.

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