Question

有没有办法使用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中遗漏了什么？非常感谢您的帮助！

由于

Answer 1

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

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

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

Answer 2

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

Answer 3

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

Answer 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

Answer 5

试试这种方式，

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

使用CSS </li>标记最后和第二个<li>标签

5 个答案: