使用CSS选择器选择最后一个元素

Question

是否有办法仅使用CSS定位组中的最后X个元素（假设我们不知道有多少元素）？

示例 - 定位ul中的最后3个元素：

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  ...
  <li>Element X-2</li>
  <li>Element X-1</li>
  <li>Element X</li>
</ul>

Answer 1

使用:nth-last-child(N) selector：

li:nth-last-child(-n+3) {
    /* ... */
}

See this demo.

Answer 2

这将应用最后3个元素的样式。 Demo

li:nth-last-child(-n+3)
{
    ....
}

<强>支持

Feature        Chrome   Firefox    (Gecko)    IE    Opera   Safari
Basic support   4.0     3.5        (1.9.1)    9.0   9.5   3.2