css - 如何在具有不同 li 类的 ul-li 列表中获取特定类的最后一个 li

Question

我有 ul-li 列表

<ul>
<li class="digit">1</li>
<li class="digit">2</li>
<li class="digit">3</li>
<li class="letter">A</li>
<li class="letter">B</li>
</ul>        

我可以在列表中使用纯 css 最后一个选择器“.digit”吗？ .digit 的数量未知 ul li.digit:nth-last-child(-n+1){ background: red; 不起作用

Answer 1

你可以使用:

.digit:nth-child(3) {color:red;}

.digit:nth-child(3) {color:red;}

<ul>
<li class="digit">1</li>
<li class="digit">2</li>
<li class="digit">3</li>
<li class="letter">А</li>
<li class="letter">Б</li>
</ul>       

但是，如果您在评论中发布的“数字”类数量未知，您可能需要像这样使用一些 javascript/jquery:

  $('.digit:last').addClass( "newclass" );

.newclass {color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="digit">1</li>
<li class="digit">2</li>
<li class="digit">3</li>
<li class="digit">4</li>
<li class="digit">5</li>
<li class="letter">А</li>
<li class="letter">Б</li>
</ul>