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

使用标准列表，我试图选择最后2个列表项。我一直的An+B各种排列，但似乎没有选择最后2：是否可以选择最后n个项目与第n孩子？

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）。

来源

2011-01-30 DisgruntledGoat

IE尽管如此，对于`浏览器支持：第n-最后一子（）`与`：nth-child（）`[根据quirksmode.org]大致相同（http://www.quirksmode.org/css/contents.html#t38）。另外，`：nth-child（）`和`：nth-last-child（）`都是在CSS3中引入的，在这个意义上，既不是老的也不是新的。 – BoltClock 2011-01-30 17:53:54

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

来源

2011-01-30 17:55:08

感谢您的链接 - 看起来像第n个孩子的支持实际上是第n个最后一个孩子一样（我确定IE8支持第n孩子，但也许不是）。 – DisgruntledGoat 2011-01-30 17:58:39

@DisgruntledGoat我也这么认为，但显然它不...... – 2011-01-30 17:59:35

由于nth-child的语义定义，我不明白如果不包括所涉及的元素列表的长度如何这是可能的。语义的要点是允许将一堆子元素分隔成重复组（编辑-感谢BoltClock），或者将其分成固定长度的第一部分和其余部分。你想要的是相反的，这就是nth-last-child给你的。

来源

2011-01-30 17:57:05 Pointy

使用`：nth-child（）`，你可以通过指定`：nth-child（-n + m）来选择第一个`m`元素` 。 – BoltClock 2011-01-30 18:00:04

@BoltClock我将不得不考虑这一点...哦，是的，你是对的。很明显，我无法就发明CSS3选择器时委员会的意图做出严肃声明:-) – Pointy 2011-01-30 18:03:29

-2

如果您在您的项目中使用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伪选择，你将有一个更加一致的跨浏览器体验。

来源

2011-01-30 18:02:30

我试过了，它在IE8中不起作用。 – bobber205 2013-10-11 22:08:23

174

这将选择列表中的最后两个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>

来源

2011-06-30 23:29:42

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

来源

2012-07-16 15:27:21

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

回答

相关问题