如何僅使用 CSS 為最後一個子元素設定特定類別名稱的樣式？

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

尋找CSS 解決方案來定位具有特定類別名稱的最後一個子元素類名，這個問題提出了一個挑戰，因為子元素的數量可能會有所不同。這就引起了 nth-child() 可能不夠的擔憂。 JavaScript 也被排除在外。

解決方案在於 :last-of-type 偽類和 屬性選擇器。

CSS代碼：

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

說明：

• [class="list "]:選擇具有類別名稱「list」作為其類別屬性值的一部分（即，不一定是唯一的class)。 :last-of-type:
選擇屬於其類型的最後一個子元素的元素（即，具有類別「list」的最後一個

li

元素").

透過組合這些選擇器，該規則將黑色背景應用於具有類別名稱的最後一個子元素“list”，無論它是否有其他類別或存在多少個子元素。

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

範例：

在此範例中，即使第三個child有一個附加類，CSS 規則仍將對其套用黑色背景，因為它是具有該類別名稱的最後一個子級「清單。 」

屬性選擇器：

屬性選擇器允許我們根據元素的屬性（包括類別名稱）來定位元素。

class~選擇器允許我們選擇類別名稱包含指定單字的元素（例如，如果我們有多個名為「list-item-1」、「list-item-2」的類別）等）。 🎜>資源：

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

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