Question

我有一个清单

<ul>
    <li class="range1">Entry</li>
    <li class="range1">Entry</li>
    <li class="range1">Entry</li>
    <li class="range2">Entry</li>
    <li class="range2">Entry</li>
    <li class="range2">Entry</li>
</ul>

现在我想选择类“range1”的最后一个li。问题是，这个列表是sql数据库输出的动态原因，所以我不能使用nth-child。

li.range1:last-child

不起作用。我不想使用Javascript，所以可以只使用CSS吗？

Answer 1

您无法将last-of-type或last-child应用于CSS类。

您可以使用Javascript或稍微更改HTML（最好的解决方案）：

<ul class="range">
    <li class="range1">Entry</li>
    <li class="range1">Entry</li>
    <li class="range1 range__last">Entry</li>
    <li class="range2">Entry</li>
    <li class="range2">Entry</li>
    <li class="range2 range__last">Entry</li>
</ul>

Answer 2

last-child仅适用于其父项的最后一个元素，与您指定的类名称区别无关。

或者li.range1：nth-child（3）可以使用。否则它应该为你指定的列表

分别设置容器类

CSS选择具有特定类的最后一个li元素

2 个答案: