如何使用 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:nth-child(3) 的常見方法可能並不總是適用，因為所需元素的位置可能會有所不同。

為了克服這個問題，我們可以利用屬性選擇器。操作方法如下：

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

在此選擇器中：

• [class~='list'] 定位class 屬性包含字串「list」作為整個單字的所有元素。這允許在字串中的任何位置使用“list”的多個類，無論順序如何。
• :last-of-type 選擇其型別中前一個選擇器的最後一個符合項目。在這種情況下，它的目標是最後一個
• 。具有類別“list”的元素。

透過組合這些選擇器，我們可以有效地設定指定類別的最後一個子元素的樣式。您可以在 http://codepen.io/chasebank/pen/ZYyeab 找到 рабочее, приятное 演示。

有關屬性選擇器的更多參考，請查看以下內容資源：

• http://css-tricks.com/attribute-selectors/
• http://www.w3schools.com/css/css_attribute_selectors.asp

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