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

Question

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

Answer 1

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

Answer 2

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

也会玩.

Answer 3

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

Answer 4

不幸的是这是不可能的。。忽略这个答案并查看下面的 spliters 答案。

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

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

但这不起作用，因为 + 将选择最后一个子级之后的直接兄弟级（当然，这没什么）。没有紧邻的前一个选择器。

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

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

http://jsfiddle.net/qkzdJ/