如何在CSS中选择具有特定类名的“last child”

Question

• test1
• test2
• test3
• test4

如何选择班级名称为“ 名单的 最后一个孩子” ？

<style>
    ul li.list:last-child{background-color:#000;}
</style>

我知道上面的示例不起作用，但是有什么类似的方法可以起作用吗？

重要：

a）我不能使用ul li:nth-child(3)，因为它可能也排在第四或第五位。

b）没有JavaScript。

Answer 1

我建议您利用可以为一个元素分配多个类这样的事实：

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list last">test3</li>
    <li>test4</li>
</ul>

最后一个元素具有list与其兄弟姐妹相似的last类，但也具有可用于设置所需的任何CSS属性的类，如下所示：

ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}