如何使用CSS匹配最后n个孩子？

Question

我们希望匹配父容器的最后12个元素。如何用CSS做到这一点？为了澄清，12是任意数字。我们想知道如何匹配父容器的最后N个元素。

Answer 1

定义:nth-last-child(N)

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

此示例选择器将匹配任何列表中的最后12个列表项，无论是有序还是无序：

Answer 2

http://reference.sitepoint.com/css/pseudoclass-nthlastchild

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

Answer 3

您需要:nth-last-child pseudoclass（或:nth-last-of-type进行类型检查）。之后，您可以使用~选择所有后续兄弟姐妹：

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

http://jsbin.com/uhuzer/1/edit