Question

使用标准列表，我正在尝试选择最后2个列表项。我有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）。

Answer 1

这将选择列表的最后两个iems：

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>
  <li>fred</li>
  <li>fred</li>
</ul>

Answer 2

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

Answer 3

:nth-last-child(-n+2)应该做的伎俩

Answer 4

由于nth-child语义的定义，如果不包括所涉及元素列表的长度，我看不出这是如何实现的。语义的要点是允许将一堆子元素分成重复组（编辑 - 感谢BoltClock）或者进入某个固定长度的第一部分，然后是“其余部分”。你有点希望与此相反，这是nth-last-child给你的。

Answer 5

如果您在项目中使用jQuery，或者愿意包含它，您可以通过其选择器API调用nth-last-child（这是模拟它将跨浏览器）。 Here is a link到nth-last-child插件。如果你采用这种方法来定位你感兴趣的元素：

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

然后再次设置last类，而不是nth-child或nth-last-child伪选择器，您将获得更加一致的跨浏览器体验。

是否可以选择带有nth-child的最后n个项目？

5 个答案: