CSS選擇具有特定類別的最后一個元素

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）。 否則，對於您指定的兩個列表，它應該具有單獨的容器類