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