使用 CSS 设置最后一个和倒数第二个 <li> 标签的样式答案

【问题标题】：Style last and second last <li> tags using CSS使用 CSS 设置最后一个和倒数第二个 <li> 标签的样式
【发布时间】：2012-07-27 23:43:28
【问题描述】：

有没有办法使用 CSS 设置最后一个和第二个 <li> 标签的样式。我尝试使用ul li:nth-child(6) 并给它一个padding-top:10px;，但是所有菜单的填充顶部正在改变。

<ul>
    <li><a href="#"><span>Menu 1</span></a></li>
    <li><a href="#"><span>Menu 2</span></a></li>
    <li><a href="#"><span>Menu 3</span></a></li>
    <li><a href="#"><span>Menu 4</span></a></li>
    <li><a href="#"><span>Menu 5</span></a></li>
    <li><a href="#"><span>Menu 6</span></a></li>
    <li><a href="#"><span>Menu 7</span></a></li>
</ul>

还有其他方法可以解决这个问题，还是我的 CSS 中遗漏了什么？非常感谢您的帮助！

谢谢

【问题讨论】：

值得注意的是，nth-child 选择器在 IE8 和更低版本的 IE 浏览器中不起作用。要获得全面支持，您可以使用基于 jQuery 的解决方案（其他 javascript 库可用：p）
您的代码似乎可以在 Firefox 中找到。你使用的是什么浏览器？ jsfiddle.net/YZRDY
是的，它在 chrome 中也能正常工作

标签： css css-selectors html-lists

【解决方案1】：

与其他类似建议一样，此解决方案不适用于某些较旧的浏览器：

ul li:last-child, ul li:nth-last-child(2) {
  padding-top: 10px;
}

这样，样式表不依赖于列表中的具体项目数。

【讨论】：

【解决方案2】：

<ul>
        <li><a href="#"><span>Menu 1</span></a></li>
        <li><a href="#"><span>Menu 2</span></a></li>
        <li><a href="#"><span>Menu 3</span></a></li>
        <li><a href="#"><span>Menu 4</span></a></li>
        <li><a href="#"><span>Menu 5</span></a></li>
        <li class="last"><a href="#"><span>Menu 6</span></a></li>
        <li class="last"><a href="#"><span>Menu 7</span></a></li>
    </ul>

在css文件中

.last
        {
            padding-top: 10px;
        }

【讨论】：

【解决方案3】：

ul li :nth-child(6)
     {
       padding-top:10px;
     }
ul li:last-child
    {
      padding-top:10px;
     }

【讨论】：

【解决方案4】：

如上所述，代码确实有效：

HTML：

<ul>
    <li><a href="#"><span>Menu 1</span></a></li>
    <li><a href="#"><span>Menu 2</span></a></li>
    <li><a href="#"><span>Menu 3</span></a></li>
    <li><a href="#"><span>Menu 4</span></a></li>
    <li><a href="#"><span>Menu 5</span></a></li>
    <li><a href="#"><span>Menu 6</span></a></li>
    <li><a href="#"><span>Menu 7</span></a></li>
</ul>

CSS：

ul li:nth-child(6)
{
    padding-top:10px;
}

可能您的浏览器没有兼容的 CSS3 选择器（如果您使用的是 IE，则没有机会）。这是一个简单的浏览器支持列表：nth-child support

【讨论】：

【解决方案5】：

试试这个方法，

 ul li:nth-child(6), ul li:nth-child(7) {
    padding-top:10px;
}

【讨论】：