html - 删除列表导航边框的最后一项

Question

我正在努力去除导航列表最后一项上的“管道”边框——我的代码——

<div id="header">
    <ul id="menu">
        <li><a href="">Home</a></li>
        <li><a href="">Stories</a></li>
        <li><a href="">Tell your story</a></li>
        <li><a href="">Prizes</a></li>
        <li><a href="">How to tips</a></li>
    </li>
</div>

还有我的CSS

#menu li{
    float:left;
    list-style-type: none;
    display:inline;
    padding:0 .9em;
    border-right:1px solid #d2d2d2;;
}
#menu li.last{
    border-right:none;
}

Answer 1

您可以使用 adjacent sibling selector只为前面有 li 同级元素的 li 元素设置左边框:

#menu li {
    float: left;
    list-style-type: none;
    display: inline;
    padding: 0 .9em;
}
#menu li + li {
    border-left: 1px solid #d2d2d2;
}