Wie wähle ich bestimmte Elemente mit den Selektoren „nth-child“ oder „nth-of-type“ aus?

Auswählen spezifischer Elemente mit dem n-ten Kind oder dem n-ten Typ

Zum Auswählen des ersten, zweiten oder dritten Elements mit einem gegebenen Element Für den Klassennamen können Sie die Pseudoselektoren „nth-child“ oder „nth-of-type“ verwenden. Mit diesen Selektoren können Sie bestimmte Elemente basierend auf ihrer Position innerhalb eines übergeordneten Containers oder zwischen ihren Geschwistern desselben Typs ansprechen.

Verwendung von nth-child

Das nth- Der untergeordnete Selektor wählt Elemente basierend auf ihrer Position unter allen untergeordneten Elementen eines übergeordneten Elements aus. Um auf bestimmte Elemente mit einem Klassennamen abzuzielen, schließen Sie Ihre Elemente in einen übergeordneten Container ein und verwenden Sie die folgende Syntax:

<code class="css">parent_container:nth-child(item number) { ... }</code>

Wenn Ihre Elemente beispielsweise in einem übergeordneten Element mit dem Klassennamen „parent_class“ enthalten sind, "Sie können das erste, zweite und dritte Element mit dem Klassennamen „myclass“ wie folgt auswählen:

<code class="css">.parent_class:nth-child(1) { ... }
.parent_class:nth-child(2) { ... }
.parent_class:nth-child(3) { ... }</code>

Mit nth-of-type

The Der N-Typ-Selektor wählt Elemente basierend auf ihrer Position unter Geschwistern desselben Typs aus. Dies ist nützlich, wenn Sie mehrere Klassen in einem übergeordneten Container haben und auf bestimmte Elemente mit einem bestimmten Klassennamen abzielen möchten. Die Syntax ähnelt nth-child:

<code class="css">class_name:nth-of-type(item number) { ... }</code>

Anwenden auf Ihr Beispiel könnten Sie das erste, zweite und dritte Element mit dem Klassennamen „myclass“ wie folgt auswählen:

<code class="css">.myclass:nth-of-type(1) { ... }
.myclass:nth-of-type(2) { ... }
.myclass:nth-of-type(3) { ... }</code>

Das obige ist der detaillierte Inhalt vonWie wähle ich bestimmte Elemente mit den Selektoren „nth-child“ oder „nth-of-type“ aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!