如何用CSS匹配最後n個孩子？

我們想匹配父容器的最後12個元素。如何用CSS做到這一點？爲了澄清，12是一個任意數字。我們想知道如何匹配父容器的最後N個元素。如何用CSS匹配最後n個孩子？

2012-09-14 Crashalot

提示：不帶'：nth-child（）'。 – BoltClock

12聽起來像一個非常神奇的數字。重新考慮一下將會更加明智*爲什麼*你想要12。 –

12是一個任意數字。對困惑感到抱歉。 – Crashalot

li:nth-last-child(-n+12) { 
    /*your css declarations*/ 
}

此示例選擇器將匹配任何列表中的最後12個列表項，無論是有序還是無序：

2012-09-14 18:45:45 Dipak

但它不支持IE 8.並且這不是有效的CSS。 – Pavlo

@PavloMykhalov真！ IE8不支持CSS3僞類，這個問題用CSS3 – Dipak

@Dipacks標記不夠。但是，無效的CSS呢？我的建議是：做第二行註釋：'/ *聲明* /'。 – Pavlo

您想要:nth-last-childpseudoclass（或:nth-last-of-type進行類型檢查）。之後，你可以使用~選擇所有後續的兄弟姐妹：

.container > *:nth-last-child(13) ~ * { }

2012-09-14 18:44:19 tuff

如果沒有更多的孩子，那麼你就不會工作。 – Krycke

更具體地說，如果少於13個孩子，它不起作用。當然，如果OP能保證總會有至少13個孩子，那麼就不會有任何問題。 – BoltClock

錯誤修正！ – tuff

li:nth-last-child(-n+12) { 
    ⋮ declarations 
}

2012-09-14 18:44:57

回答