1

有没有办法<li>使用 CSS 设置最后一个和第二个标签的样式。我尝试使用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 中遗漏了什么？对你的帮助表示感谢！

谢谢

4

5 回答 5

5

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

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

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

于 2012-07-30T11:28:39.507 回答
1 
ul li :nth-child(6)
     {
       padding-top:10px;
     }
ul li:last-child
    {
      padding-top:10px;
     }
于 2012-07-30T10:07:45.280 回答
1 
<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;
        }
于 2012-07-30T10:09:41.023 回答
1

试试这个方法 

 ul li:nth-child(6), ul li:nth-child(7) {
    padding-top:10px;
}
于 2012-07-30T10:57:11.090 回答
1

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

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

于 2012-07-30T10:16:05.253 回答