CSS最后一个孩子（-1）

问题描述：

我在找一个css选择器，可以让我选择列表的最后一个孩子。CSS最后一个孩子（-1）

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> <!-- select the pre last item dynamically no matter how long this list is --> 
    <li>6</li> 
</ul>

静态方法：

ul li:nth-child(5)

动态方法：这当然不验证，也第n-最后孩子似乎

ul li:last-child(-1)

不提供一个动态的方式..我可以后备到JavaScript，但我想知道如果有一种CSS方式，我忽略了

它通常被称为“倒数第二”。还有另一个奇特的词：“倒数第二”。 – BoltClock 2012-02-10 12:46:56

@BoltClock我喜欢“倒数第二”这个词。我现在要去用它在Facebook上更新一下。 – 2012-02-10 13:08:08

[使用css选择倒数第二个元素]的可能重复（http://*.com/questions/5418744/select-second-last-element-with-css） – 2016-07-14 20:32:31

答

你可以使用:nth-last-child();实际上，除了:nth-last-of-type()，我不知道你还能用什么。我不确定你的意思是“动态”，但是如果你的意思是这种风格是否适用于新的第二个孩子，当更多的孩子被添加到列表中时，是的。 Interactive fiddle.

ul li:nth-last-child(2)

好的，可以使用！代码解析器（jsfiddle）没有验证它。猜猜他们身边的错误！谢谢 – 2012-02-10 12:46:53

没有IE7和IE8支持 – 2012-02-10 12:55:32

@David Allen：我不认为他在乎他是否已经在尝试使用'：n-child（5）'和'：last-child'。像这样的评论应该回答这个问题或者保持自我。 – BoltClock 2012-02-10 12:55:58

答

除非你可以让PHP标记该元素与类你最好使用jQuery。

jQuery(document).ready(function() { 
    $count = jQuery("ul li").size() - 1; 
    alert($count); 
    jQuery("ul li:nth-child("+$count+")").css("color","red"); 
});

完全令人讨厌的是，jQuery没有实现'：nth-last-child（）'，因为[约翰认为没有人使用它]（http://ejohn.org/blog/selectors-that-people-actually-use）。 – BoltClock 2012-02-10 12:56:50

我宁愿用蟒蛇标签;-) ontopic：好的css似乎很好用这种方式，也许jsfiddle也认为没有人使用它:-) – 2012-02-10 12:59:30

@ArgsKwargs：奇怪，为什么它不会在jsFiddle中工作。由浏览器来解释它。它没有自己的CSS引擎。 – BoltClock 2012-02-10 13:00:50

CSS最后一个孩子（-1）

相关推荐