【问题标题】：Styling third last element in LI tag? [duplicate]在 LI 标签中设置倒数第三个元素的样式？ [复制]
【发布时间】：2014-08-14 16:15:06
【问题描述】：

<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>

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

【问题讨论】：

用jquery可以做到吗？

标签： html css css-selectors

【解决方案1】：

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

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

Here is a working example

Browser support chart

【讨论】：

【解决方案2】：

:nth-clast-child()

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

【讨论】：