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方式，我忽略了

來源

2012-02-10 Hedde van der Heide

它通常被稱爲「倒數第二」。還有另一個奇特的詞：「倒數第二」。 – BoltClock 2012-02-10 12:46:56

@BoltClock我喜歡「倒數第二」這個詞。我現在要去用它在Facebook上更新一下。 – 2012-02-10 13:08:08

[使用css選擇倒數第二個元素]的可能重複（http://stackoverflow.com/questions/5418744/select-second-last-element-with-css） – 2016-07-14 20:32:31

167

你可以使用:nth-last-child();實際上，除了:nth-last-of-type()，我不知道你還能用什麼。我不確定你的意思是「動態」，但是如果你的意思是這種風格是否適用於新的第二個孩子，當更多的孩子被添加到列表中時，是的。 Interactive fiddle.

ul li:nth-last-child(2)

來源

2012-02-10 12:41:29 BoltClock

好的，可以使用！代碼解析器（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"); 
});

來源

2012-02-10 12:54:40

完全令人討厭的是，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）

回答

相關問題