是否可以选择第n个孩子的最后n个项目？

130

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

css css-selectors

— 心怀不满的山羊
source

5

尽管具有IE，但浏览器对quicksmode.org的支持:nth-last-child()大致相同。而且，并且都是在CSS3中引入的，从这个意义上讲，这两个版本都不老。:nth-child() :nth-child():nth-last-child()

— BoltClock

CSSnth-child技巧总结了很多有用的技巧

— m7913d，

273

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

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>

展开摘要

— 约翰·吉塞
source

是的，但是您使用的:nth-last-child()是已经提到的。

— BoltClock

6

（-n + 2）=>这就是我要寻找的。谢谢

— Surjith SM

16

这应该是一个可以接受的答案，是的，已经提到了第n个倒数第二个孩子，但是（-n + b）并不是一个很酷的技巧

— BlackTigerX 2014年

56

nth-last-child听起来好像是专门为解决此问题而设计的，所以我怀疑是否存在更兼容的替代方案。不过，支持看起来还不错。

— 佩卡
source

感谢您的链接-看起来nth-child支持实际上与nth-last-child相同（我确定IE8支持nth-child，但也许不支持）。

— DisgruntledGoat

14

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

— 丹妮尔·索博列夫（Danyl Sobolev）
source

1

由于的语义的定义，nth-child如果不包括所涉及元素列表的长度，我看不到这是怎么可能的。语义的要点是允许将一堆子元素分为重复的组（编辑 -感谢BoltClock）或固定长度的第一部分，然后是“其余”部分。您有点想要相反的东西，这就是nth-last-child给您的。

— 尖尖的
source

1

随着:nth-child()您可以选择先m通过指定的元素:nth-child(-n+m)。

— BoltClock

@BoltClock我将不得不考虑一秒钟……哦，是的，您是正确的。显然，我不太想就发明CSS3选择器时委员会的意图发表严肃的声明：-)

— Pointy

-2

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

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

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

— 内森·安德森（Nathan Anderson）
source