Question

我正在尝试完成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条目？

Answer 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伪类，所以比first-child更有限，这对IE7 +有利。

Answer 2

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

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

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

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

Answer 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

Answer 4

尝试：last-child Selector，简单方法。

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

Answer 5

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

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

Answer 6

作为第一个孩子的替代方案，您还可以使用相邻的兄弟选择器来获得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;
}

从上一个导航列表项中删除边框

6 个答案: