在LI标签中设置第三个最后一个元素？

Question

<ul class="pager">
  <li class="first"><span>1</span></li>
  <li><a href="/blog?page=2">2</a></li>
  <li><a href="/blog?page=3">3</a></li>
  <li><a href="/blog?page=4">4</a></li>
  <li><span>...</span></li>
  <li><a href="/blog?page=2">></a></li>
  <li class="last"><a href="/blog?page=8">>></a></li>
</ul>

我想将样式background-color:white添加到<li>的第三个元素。我不知道会有多少<li>。我唯一知道的是，我需要添加样式对于第三个<li>，这在纯CSS中可能吗？

Answer 1

是的，你可以使用nth-last-child ......

ul.pager li:nth-last-child(3)
{
    background-color:white;
}

Here is a working example

Browser support chart

Answer 2

：第n-碎屑 - 子（）

ul.pager li:nth-last-child(3) {
    /* your style here */
    background-color: white;
}

查看fiddle。

浏览器支持

  

所有主流浏览器都支持：nth-​​last-child（）选择器，IE8及更早版本除外。

来源：http://www.w3schools.com/cssref/sel_nth-last-child.asp