从最后一个导航列表项中删除边框答案

【问题标题】：Remove border from last navigation list item从最后一个导航列表项中删除边框
【发布时间】：2013-08-31 09:29:31
【问题描述】：

我正在尝试完成一个包含在 div 中的导航列表。

我将它设置为在每个项目的右侧有一个边框以分隔每个项目。我希望仅在中间项上而不是在最后一项上具有此边框。

HTML：

<div id="container-navigation">
    <ul id="navigation">
        <li><a href="index.html" target="_self">home</a></li>
        <li><a href="aboutus.html" target="_self">about</a></li>
        <li><a href="solutions.html" target="_self">solutions</a></li>
        <li><a href="training.html" target="_self">training</a></li>
        <li><a href="payments.html" target="_blank">payments</a></li>
        <li><a href="contact.html" target="_self">contact</a></li>
    </ul>
</div>

CSS：

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-right: 1px solid #ffffff;
}

实现这一目标的最佳方法是什么？给最后一个项目一个唯一的类并创建另一个 CSS 条目？

【问题讨论】：

你想支持哪些浏览器？

标签： html css

【解决方案1】：

正如 thgaskell 所建议的，这是一种方法：

#navigation li a {
    color: green;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-right: 1px solid red;
}
#navigation li:last-child a {
    border-right: none;
}

演示地址：http://jsfiddle.net/audetwebdesign/G3mD9/

注意： IE9+ 支持 last-child 伪类，因此比适用于 IE7+ 的 first-child 更受限制。

【讨论】：

【解决方案2】：

如果是我，我会把边框移到左边而不是右边：

#navigation li a {
    border-left: 1px solid #ffffff;
}

然后我会使用first-child，因为它具有良好的跨浏览器兼容性。

#navigation li:first-child a {
    border-left: 0 none;
}

【讨论】：

【解决方案3】：

如果您需要支持较旧的浏览器（IE7+ 等...），您应该将边框从右侧翻转到左侧，以便您可以使用 css 选择器first-child。

从此更改您当前的 css：

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-right: 1px solid #ffffff;
}

收件人：

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-left: 1px solid #ffffff;
}

#navigation li:first-child a {
    border-left: none;
}

EXAMPLE FIDDLE

【讨论】：

关于 IE7+ 支持的好点，而 last-child 只对 IE9+ 有好处（赞成票：）

【解决方案4】：

试试 :last-child 选择器，简单的方法。

#navigation li a:last-child {
     border-right: none;
}

【讨论】：

应该是#navigation li:last-child a。
是的，你是对的，但它不会删除边框，因为它在 a 标签中。
它应用于a。但是您需要选择最后一个li，而不是每个li 的最后一个a（适用于每个a，因为每个li 中只有一个a。

【解决方案5】：

为最后一个列表项创建新的 id 或类名，然后给出这样的风格，

#id_name a { border-right:none !important; }

【讨论】：

您不需要!important 选项，id 本身会增加规则的特异性，足以覆盖主要的 CSS 规则。

【解决方案6】：

作为 :first-child 的替代方法，您还可以使用相邻兄弟选择器来获得 IE7+ 支持。不过，它也需要像其他解决方案一样从右边界更改为左边界。

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
}
#navigation li + li a {
    border-left: 1px solid #ffffff;
}

【讨论】：