如何使用 css nth-child 选择列表中的最后 2 个项目？答案

【问题标题】：How do I choose the last 2 items in a list with css nth-child?如何使用 css nth-child 选择列表中的最后 2 个项目？
【发布时间】：2011-09-30 02:23:18
【问题描述】：

有可能吗？如果没有，有没有办法用 jQuery 做到这一点？

【问题讨论】：

不知道这是在问什么。你可以发布示例吗？
Is it possible to select the last n items with nth-child? 的可能重复项

标签： css css-selectors

【解决方案1】：

~~很遗憾，这是不可能的。~~。忽略这个答案和look at spliters answer below。

如果可能的话，它看起来像......

ul li:last-child+li {...}

但这不起作用，因为 + 会选择 after last-child 的直接兄弟（当然，这没什么）。没有直接的 previous 选择器。

使用 jQuery 有不同的方法来实现这一点，性能最好的应该是......

var lastItems = $("#list li");
lastItems.slice(lastItems.length - 2).addClass("whatever");

http://jsfiddle.net/qkzdJ/

【讨论】：

这是可能的。规范和重复的问题链接都有示例，尽管不是:nth-child()，而是:nth-last-child()。
@BoltClock 感谢您的提示 :) 我不知道。
不，你可以用 CSS3 解决它：ul li:nth-last-child(-n+2) {}

【解决方案2】：

使用 CSS3 是可能的。考虑标记：

<ul>
    <li><a href="">First item</a></li>
    <li>Second item</li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Pre-last item</a></li>
    <li><a href="">Last item</a></li>
</ul>

要选择最后两个 LI 元素：

ul > li:nth-last-of-type(-n+2) {
    background: green;
}

适用于所有现代浏览器，包括 IE9，但不包括 IE8 及更低版本。要添加对这些浏览器的支持，您可以考虑使用Selectivizr.js

【讨论】：

@BoltClock with nth-last-child 也是可能的，但 nth-child 不可能，因为它从一开始就选择，而 OP 想从最后选择。
干得好！我知道这是一个旧答案，但解决了我遇到的一个小问题，所以谢谢！
这很好，因为它避免了使用 jQuery 来做一些可以通过 CSS 实现的事情
@BoltClock 无论如何，它解决了 OP 的问题。很明显，nth-child 是不可能的。 OP 可能建议 nth-child，因为他/她可能不知道 last-of-type
@spliter 最佳答案我在 stackoverflow 看到过一段时间，考虑到它只有 1 个选择器

【解决方案3】：

:last-child,
:nth-last-child(2) {
  ruleset
}

也会播放。

【讨论】：

像魅力一样工作。谢谢

【解决方案4】：

对我来说是这样的： li:not(:nth-last-child(-n+2))

【讨论】：