Question

如果我有ul，如何在除最后一个之外的所有li项目上设置边框底部？我也试图使border 180px的宽度。这是我的代码：

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并且您的设计不允许您在元素顶部而不是底部放置边框，则会出现问题。

修改对您的宽度问题的修复是，您要将a元素的180px添加到2 * 18px，删除左侧的填充，并设置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 */
}

Answer 3

一种方法：您可以使用 :last-child （因为您标记了css3）使用下面的规则覆盖最后一个：

.sideNav li:last-child a {
    border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}

<强> Demo

有可用于IE8的polyfill，但是如果你可以为最后一个提供一个类名并对其应用规则来重置样式将是更好的支持，而不是使用css3（如果你打算支持旧的浏览器）孔）。

如果你使用像jquery这样的脚本语言，你可以轻松地为最后一个孩子添加一个类，因为jquery负责跨浏览器的兼容性。

Answer 4

您还可以使用内联CSS来解决此问题。

<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>

这将删除＆＃34; Careers＆＃34;链接。请注意，只有将该代码放在<a>标记中才能生效，因为这是应用边框的内容，而不是<li>。

这样做的缺点是，如果你在列表中添加一些东西，那么倒数第二个列表项将没有底部边框，最后一个将会。

不是最好的解决方案，而是另一种能够完成同样事情的解决方案。干杯！

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

4 个答案:

：第一子

：最后一个孩子

+选择