除了最后一项外，我如何在所有内容上都有边框底部答案

【问题标题】：How do I have a border-bottom on all except the last item除了最后一项外，我如何在所有内容上都有边框底部
【发布时间】：2018-12-14 02:58:13
【问题描述】：

如果我有一个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;
}

【问题讨论】：

标签： css css-selectors

【解决方案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; }

:last-child

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

+ 选择器

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

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

编辑： 解决宽度问题的方法是，将 180px 添加到 a 元素的 2*18px 中，移除左右填充，然后设置 padding: 18px 0;，这样你就可以了。（更新jsfiddle：http://jsfiddle.net/NLLqB/1/）

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

【讨论】：

太棒了！我绝对不知道 li+li 部分发生了什么。我在填充 18 部分有点失去了你。我读了 4 次，但没有明白……你认为你可以扩展那个吗？
首先 - LIs：li+li 是紧随另一个
的任何
，因此在您的示例中是 Mission、Associations 和 Careers。

@JoSo - 你很迂腐 - css 是美学的。使用这些选项中的任何一个都没有任何问题，并且考虑到最佳选项 :last-child 在 IE8 中不受支持（以及 :not ），我觉得第一个孩子和元素选择器胜出css 解决方案。如果你只给出问题的答案而不是需求的答案，那么你的人生就不会走得很远。

第二部分padding：元素的默认宽度是width + padding + border（如果你想了解更多细节请搜索box模型），所以如果你有width：180px；和填充：18px；边框的总宽度为 216px。设置边距：0自动；和填充：18px 0；允许您的容器为 180 像素并位于 UL 中间。

检查下面的答案，这是最好的选择。

【解决方案2】：

使用:not(:last-child)。

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

【讨论】：

试试吧。确实如此（此处为 Iceweasel 17.0.8）
1+ 这绝对有效，并且不需要您覆盖预先存在的属性.. jsfiddle.net/MAcZa
@PSL 除非您正确应用它，否则不会。 jsfiddle.net/efFeh 看，它有效。它产生与您相同的结果，但不需要您覆盖任何现有的 CSS。
@JoSo 现在你因为什么而否决了我的回答？正如我所说，我并不是要批评答案，如果您可以按照他所期望的那样使用您发布的示例为 OP 示例准备一个小提琴，我会投票给您...
@JoSo 顺便说一句，很容易找出谁对答案投了反对票...... :) 当你改变主意不投反对票时，请告诉我（我会编辑然后你可以反转）。我可以很容易地在不发表评论的情况下拒绝你的投票。但我评论给你一个机会来修正你的答案。

【解决方案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 负责跨浏览器兼容性。

【讨论】：

-1 很抱歉没有在这篇文章下面评论我的反对意见。但我已经在我自己的帖子下方的评论中解释了为什么我认为这是一个不干净的解决方案。所以我真的不明白为什么你对一次投反对票如此生气。

【解决方案4】：

您也可以使用内联 CSS 来纠正此问题。

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

这将从“职业”链接中移除边框。请注意，只有将该代码放在 <a> 标记中才有效，因为这是应用边框的对象，而不是 <li>。

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

不是最好的解决方案，而是完成同样事情的替代方案。干杯！

【讨论】：