如何在 CSS 中選擇具有特定類別的最後一個子元素？

在CSS 中選擇具有特定類別的最後一個子元素

在CSS 中，定位具有特定類別的父元素的最後一個子元素名稱可以使用屬性選擇器來實現。考慮以下HTML 標記：

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

要選擇類別名為「list」的最後一個子元素，可以使用下列CSS：

[class~='list']:last-of-type {
    background: #000;
}

理解CSS選擇器：

• [class~='list']符合任何具有類別名稱“list”的元素。類別名稱可以放置在元素的 class 屬性中的任何位置，無論是第一個、第二個或最後一個類別。
• :last-of-type 選擇與前面的選擇器。這確保了只有類別名為「list」的最後一個子元素才是目標。

使用屬性選擇器的優點：

與CSS 偽類不同與:nth-child() 一樣，屬性選擇器具有以下優點：

• 它們可以選擇元素無論它們在父元素中的位置如何。
• 它們可以定位具有多個類別的元素。

其他資源：

• [W3Schools: :最後型選擇器](https://www.w3schools.com/cssref/sel_lastoftype.asp)
• [CSS-Tricks：了解屬性選擇器](https://css-tricks.com/ attribute-selectors/)

以上是如何在 CSS 中選擇具有特定類別的最後一個子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！