是否可以用 n 子元素选择最后的 n 个项目？

使用标准列表，我试图选择最后两个列表项。我有各种排列的 An+B，但似乎没有选择最后2:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

我知道一个新的 CSS3选择器，如 :nth-last-child()，但我更喜欢的东西，工作在一些更多的浏览器，如果可能的话(不关心 IE 特别)。

129095 次浏览

小开

nth-last-child听起来像是专门为解决这个问题而设计的，所以我怀疑是否有更兼容的替代品。不过支撑看起来是还不错。

小开

由于 nth-child语义的定义，如果不包含所涉及元素列表的长度，我不知道这是如何实现的。语义的要点是允许将一组子元素隔离为重复组(编辑-感谢 BoltClock) ，或者隔离为某个固定长度的第一部分，然后是“其余部分”。你需要的恰恰相反，这就是 nth-last-child给你的。

小开

如果您在项目中使用 jQuery，或者愿意包含它，您可以通过它的选择器 API 调用 nth-last-child(这是模拟的，它将跨浏览器)。这里有一个链接到一个 nth-last-child插件。如果你采用这种方法来定位你感兴趣的元素:

$('ul li:nth-last-child(1)').addClass('last');

然后再样式的 last类，而不是 nth-child或 nth-last-child伪选择器，您将有一个更一致的跨浏览器体验。

小开

最佳答案

这将选择列表的最后两项:

li:nth-last-child(-n+2) {color:red;}

<ul>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
<li>fred</li>
</ul>

小开

:nth-last-child(-n+2)应该可以