如何在 HTML 中選擇具有相同類別名稱的特定元素？

選擇具有給定類別名稱的特定元素

使用HTML 元素時，通常需要在下列清單中選擇特定元素共用類別名稱的元素。這對於在類別的特定實例上套用樣式或執行操作特別有用。

使用nth-child

在類別清單中選擇特定元素的一種方法是使用nth-child() 偽類選擇器。此選擇器可讓您選擇元素在其父元素中第 n 次出現。

例如：

<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>

使用nth-of- type

或者，您可以使用nth -of-type() 偽類選擇器。此選擇器可讓您選擇特定類型的元素在其父元素中第 n 次出現。

範例：

<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>

透過使用 nth-child() 或nth-of-type()，您可以有效地選擇具有給定類別名稱的特定元素，無論它們在標記中的位置如何，並應用樣式或執行操作相應地。

以上是如何在 HTML 中選擇具有相同類別名稱的特定元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！