Wie kann ich bestimmte Elemente mit demselben Klassennamen basierend auf ihrer Position in HTML auswählen?

Auswählen von Elementen mit einem bestimmten Klassennamen basierend auf der Position

In Ihrem HTML-Dokument haben Sie eine Klasse namens „myclass“ definiert, die gilt auf mehrere Elemente. Sie möchten mit dieser Klasse das erste, zweite oder dritte Element auswählen, unabhängig von ihrer Position im Markup.

Um dies ohne Verwendung von JavaScript oder jQuery zu erreichen, können Sie CSS-Pseudoselektoren verwenden:

1. Verwendung von nth-child(item number)

Dieser Selektor zielt auf das n-te untergeordnete Element innerhalb seines übergeordneten Elements ab. In Ihrem Fall möchten Sie Folgendes verwenden:

.parent_class:nth-child(1) { }  // Selects first ".myclass" element
.parent_class:nth-child(2) { }  // Selects second ".myclass" element
.parent_class:nth-child(3) { }  // Selects third ".myclass" element

2. Verwendung von nth-of-type(item number)

Dieser Selektor zielt auf das n-te Vorkommen eines bestimmten Elementtyps innerhalb seines übergeordneten Elements ab. Da Sie „div“-Elemente mit der Klasse „myclass“ auswählen möchten, würden Sie Folgendes verwenden:

.myclass:nth-of-type(1) { }  // Selects first ".myclass" element
.myclass:nth-of-type(2) { }  // Selects second ".myclass" element
.myclass:nth-of-type(3) { }  // Selects third ".myclass" element

Durch die Verwendung dieser Pseudoselektoren können Sie bestimmte Elemente basierend auf ihrer Position effektiv ansprechen und so anwenden je nach Wunsch verschiedene Stile.

Das obige ist der detaillierte Inhalt vonWie kann ich bestimmte Elemente mit demselben Klassennamen basierend auf ihrer Position in HTML auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!