CSS 除了最后一个项目，我如何在所有项目上设置边框底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19329459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I have a border-bottom on all except the last item
提问by Damien
If i have a ul, how do i set a border-bottom on all the liitems except the last one? I'm also trying to make the width of the border180px. here's my code:
如果我有一个ul，我如何在li除最后一个之外的所有项目上设置边框底部？我也在尝试使border180px的宽度。这是我的代码：
HTML
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
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;
}
回答by Steve Perks
Dec 13th, 2018: Note that there is no need to use this solution in today's modern browsers. You should feel free using the answer below mine li:not(:last-child) { border-bottom: 1px solid red; }
2018 年 12 月 13 日：请注意，在当今的现代浏览器中无需使用此解决方案。您应该可以随意使用我下面的答案li:not(:last-child) { border-bottom: 1px solid red; }
Without using JavaScript and not having to support IE7 and below (IE8 fails on the second one) there are three options you can use: :first-child, :lastchildand the +selector:
如果不使用JavaScript和没有支持IE7及以下（IE8未能在第二个），有三个选项，你可以使用：:first-child，:lastchild并+选择：
:first-child
：第一个孩子
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; }
+ selector
+ 选择器
li+li { border-top: 1px solid red; }
The problems arise if you need to support IE8 and your design doesn't allow you to put a border on the top of your elements as opposed to the bottom.
如果您需要支持 IE8 并且您的设计不允许您在元素的顶部而不是底部放置边框，则会出现问题。
EDIT:The fix to your width issue is that you're adding 180px to 2*18px of the aelement, remove the left right padding, and set padding: 18px 0;and you'll be golden. (updated jsfiddle: http://jsfiddle.net/NLLqB/1/)
编辑：解决您的宽度问题的方法是，您将a元素的180像素添加到 2*18像素，删除左右填充，然后设置padding: 18px 0;，您将成为金色。（更新 jsfiddle：http: //jsfiddle.net/NLLqB/1/）
Here's a jsfiddle of it: http://jsfiddle.net/NLLqB/
这是它的 jsfiddle：http: //jsfiddle.net/NLLqB/
回答by Jo So
Use :not(:last-child).
使用:not(:last-child).
.sideNav li:not(:last-child) a {
/* your css here */
}
回答by PSL
One way: You can override for the last one using a rule like below with :last-child(Since you tagged css3):
一种方法：您可以使用如下规则覆盖最后一个:last-child（因为您标记了 css3）：
.sideNav li:last-child a {
border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}
There are polyfills available for IE8, but if you can provide a classname for the last one and apply rule to it to reset the style would be of better support, rather than using css3 (if your intention is to support older browsers as well).
有可用于 IE8 的 polyfill，但是如果您可以为最后一个提供一个类名并将规则应用于它以重置样式将更好地支持，而不是使用 css3（如果您打算也支持旧浏览器）。
if you are using scripting language like jquery you can easily add a class to the last child as jquery takes care of cross-browser compatibility.
如果您使用像 jquery 这样的脚本语言，您可以轻松地向最后一个孩子添加一个类，因为 jquery 负责跨浏览器兼容性。
回答by Tomveloper
You can also use in-line CSS to correct this problem.
您还可以使用内嵌 CSS 来纠正此问题。
<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>
This will remove the border from the "Careers" link. Note that it will only work if you put that code in the <a>tag since that is what the border is being applied to, not the <li>.
这将从“职业”链接中删除边框。请注意，它仅在您将该代码放入<a>标签时才有效，因为这是应用边框的内容，而不是<li>.
The downside of this is that if you add something to the list, then the second-to-last list item will have no bottom border, and the last will.
这样做的缺点是，如果您向列表中添加内容，那么倒数第二个列表项将没有底部边框，而最后一个将没有底部边框。
Not the best solution, but an alternative one that accomplishes the same thing. Cheers!
不是最好的解决方案，而是完成同样事情的替代方案。干杯!
