小编典典

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

css

  • test1
  • test2
  • test3
  • test4

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

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

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

重要:

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

b)没有JavaScript。


阅读 742

收藏
2020-05-16

共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;
}
2020-05-16