是否可以選擇最後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孩子？

回答

相關問題