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