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

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

您可以使用相邻的兄弟选择器仅为li具有前一个li兄弟的元素设置左边框:

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