如何在 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」的元素。雖然最初建議的選擇器 ul li.list:last-child 無法運作，但還有一個替代解決方案。

救援屬性選擇器

CSS 屬性選擇器允許我們根據特定屬性來定位元素。在這種情況下，我們可以使用 [class~='list'] 選擇器來定位具有「list」類別的元素。 “~=”運算子匹配具有指定類別的整個單字的元素。這允許類別命名約定的靈活性，確保考慮多個類別。

最後， :last-of-type 偽類選擇其類型的最後一個與前面的選擇器相符的子類別。結合這些技術會產生以下工作選擇器：

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

此選擇器將匹配最後一個

。具有“list”類別並套用黑色背景顏色的元素。

了解更多關於屬性選擇器的資訊：

• [CSS 技巧中的屬性選擇器]( http://css-tricks.com /attribute-selectors/)
• [CSS屬性選擇器W3Schools](http://www.w3schools.com/css/css_attribute_selectors.asp)

以上是如何在 CSS 中使用特定類別名稱來設定最後一個子元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！