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

【问题标题】：CSS select last li-element with specific classCSS选择具有特定类的最后一个li元素
【发布时间】：2016-01-16 07:25:24
【问题描述】：

我有一个清单

<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 吗？

【问题讨论】：

伪类选择元素（听起来可能违反直觉），而不是元素类。向选择器添加一个类使它更像一个过滤器。
我不知道。肯定有 JS。
在输出数据时将类添加到组的最后一个 LI。

标签： html css css-selectors html-lists

【解决方案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>

【讨论】：

【解决方案2】：

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

也可以使用 li.range1:nth-child(3)。否则它应该为您指定的两个列表具有单独的容器类

【讨论】：

.range1 没有任何意义，如果列表是动态的，那么 :nth-child(3) 将不起作用。