'nth-child”和'nth-of-type”選擇器在選擇特定 HTML 元素時有何不同？

選擇具有nth-child 或nth-of-type 的特定元素

在HTML 中，有時需要根據以下條件選擇列表中的特定元素它的類名，無論它在標記中的位置如何。為了實現這一點，CSS 提供了兩個基本的選擇器：nth-​​child 和 nth-of-type。

使用 nth-child

nth-child 允許您根據元素的相對位置來選擇元素給它的兄弟姐妹。例如，div.myclass:nth-child(1) 將選擇其父容器中具有 myclass 類別的第一個元素。

範例：

<code class="html"><div class="parent_class">
    <div class="myclass">my text1</div>
    <!-- omitted code -->
    <div class="myclass">my text2</div>
    <!-- omitted code -->
    <div class="myclass">my text3</div>
    <!-- omitted code -->
</div></code>

<code class="css">.parent_class:nth-child(1) { /* first .myclass within .parent_class */ }
.parent_class:nth-child(2) { /* second .myclass within .parent_class */ }
.parent_class:nth-child(3) { /* third .myclass within .parent_class */ }</code>

使用nth-of-type

nth-of-type 與nth-child 類似，但它根據元素相對於具有相同標籤名稱的其他元素的位置來選擇元素。在這種情況下，div.myclass:nth-of-type(1) 會選擇其父容器中具有 myclass 類別的第一個元素，而不管任何具有不同標籤的中間元素。

範例：

使用與先前相同的HTML 程式碼：

<code class="css">.myclass:nth-of-type(1) { /* first .myclass, regardless of its container */ }
.myclass:nth-of-type(2) { /* second .myclass, regardless of its container */ }
.myclass:nth-of-type(3) { /* third .myclass, regardless of its container */ }</code>

透過利用這些選擇器，您可以準確地定位具有給定類別名稱的特定元素，從而實現複雜且動態的頁面佈局是基於它們在文件結構中的位置。

以上是'nth-child”和'nth-of-type”選擇器在選擇特定 HTML 元素時有何不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！