如何在除最后一项之外的所有区域都有边框底部

Question

如果我有ul,如何在li除最后一个项目之外的所有项目上设置边框底部？我也试图制作border180px 的宽度.这是我的代码:

HTML

<ul class="sideNav">
  <li><a href="/history.asp">History</a></li>
  <li><a href="/mission.asp">Mission</a></li>
  <li><a href="/associations.asp">Associations</a></li>
  <li><a href="/careers.asp">Careers</a></li>
</ul>

CSS

.sideNav {
    margin:0;
    padding:0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    width:216px;
    background-color:#017dc6;
}

.sideNav li {
    list-style-type:none;
    text-align:center;
    text-transform:uppercase;
    width:180px;
}

.sideNav li a {
    border-bottom:1px solid #80bee3;
    width:180px;
    color:#ffffff;
    text-decoration:none;
    display:block;
    padding:18px;
}

Answer 1

2018年12月13日:请注意,在当今的现代浏览器中无需使用此解决方案.你可以随意使用我的下面的答案li:not(:last-child) { border-bottom: 1px solid red; }

如果不使用JavaScript和没有支持IE7及以下(IE8未能在第二个),有三个选项,你可以使用::first-child,:lastchild并+选择:

:第一个孩子

li { border-top: 1px solid red; }
li:first-child { border-top: none; }

:最后一个孩子

li { border-bottom: 1px solid red; }
li:last-child { border-bottom: none; }

+选择器

li+li { border-top: 1px solid red; }

如果您需要支持IE8并且您的设计不允许您在元素顶部而不是底部放置边框,则会出现问题.

编辑: 你的宽度问题的修复是你添加180px到2*18px的a元素,删除左右填充,并设置padding: 18px 0;,你将是金色的.(更新jsfiddle:http://jsfiddle.net/NLLqB/1/)

这是一个jsfiddle:http://jsfiddle.net/NLLqB/

Answer 2

使用:not(:last-child).

.sideNav li:not(:last-child) a {
    /* your css here */
}