Wie wähle ich bestimmte Elemente mit demselben Klassennamen in HTML aus?

Auswählen bestimmter Elemente mit einem bestimmten Klassennamen

Bei der Arbeit mit HTML-Elementen ist es häufig erforderlich, bestimmte Elemente in einer Liste auszuwählen Elemente, die einen Klassennamen gemeinsam haben. Dies kann besonders nützlich sein, um Stile anzuwenden oder Aktionen auf bestimmte Instanzen einer Klasse auszuführen.

Nth-child verwenden

Ein Ansatz zum Auswählen bestimmter Elemente innerhalb einer Klassenliste besteht darin, den Pseudoklassenselektor nth-child() zu verwenden. Mit diesem Selektor können Sie das n-te Vorkommen eines Elements innerhalb seines übergeordneten Elements auswählen.

Beispiel:

<code class="html"><div class="parent_class">
    <div class="myclass">my text1</div>
    <!-- some other code+containers... -->

    <div class="myclass">my text2</div>
    <!-- some other code+containers... -->

    <div class="myclass">my text3</div>
    <!-- some other code+containers... -->
</div>

.parent_class:nth-child(1) { /* styles for the first element with the "myclass" class within the "parent_class" element */ }
.parent_class:nth-child(2) { /* styles for the second element with the "myclass" class within the "parent_class" element */ }
.parent_class:nth-child(3) { /* styles for the third element with the "myclass" class within the "parent_class" element */ }</code>

Verwendung von nth-of- Typ

Alternativ können Sie die verwenden nth-of-type() Pseudoklassenselektor. Mit diesem Selektor können Sie das n-te Vorkommen eines Elements eines bestimmten Typs innerhalb seines übergeordneten Elements auswählen.

Beispiel:

<code class="css">.myclass:nth-of-type(1) { /* styles for the first element with the "myclass" class */ }
.myclass:nth-of-type(2) { /* styles for the second element with the "myclass" class */ }
.myclass:nth-of-type(3) { /* styles for the third element with the "myclass" class */ }</code>

Durch die Verwendung von nth-child() oder nth-of-type() können Sie mit einer bestimmten Klasse effektiv bestimmte Elemente auswählen Namen, unabhängig von ihrer Position im Markup, und wenden Sie Stile an oder führen Sie entsprechende Aktionen aus.

Das obige ist der detaillierte Inhalt vonWie wähle ich bestimmte Elemente mit demselben Klassennamen in HTML aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!