如何在 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中文网其他相关文章！