CSS 删除最后一个边框底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5057484/
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
Remove last border-bottom?
提问by user622378
I use li to show a list of records.
我使用 li 来显示记录列表。
Each li has a bottom-border:1px solid black;
每个 li 都有一个底部边框：1px 纯黑色；
but I don't want to show border at the end of li?
但我不想在 li 的末尾显示边框？
example:
例子：
.test li{
height:1%;
overflow:hidden;
padding:4px 0;
margin:-1px 0 0;
border-bottom: 1px solid black;
}
.test li.last { border-bottom: none; }
<ul class="test">
<li> Foo 1 </li>
<li> Foo 2 </li>
<li> Foo 3 </li>
</ul>
Foo 3 still showing bottom border.
Foo 3 仍然显示底部边框。
回答by Robin Maben
.test li{
height:1%;
overflow:hidden;
padding:4px 0;
margin:-1px 0 0;
border-bottom: 1px solid black;
}
.test li:last-child { border-bottom: none; }
回答by jswolf19
You can also set the top border instead and use the sibling selector to handle this without the need for an extra class:
您还可以设置顶部边框，并使用同级选择器来处理此问题，而无需额外的类：
.test li{
height:1%;
overflow:hidden;
padding:4px 0;
margin:-1px 0 0;
}
.test li + li { border-top: 1px solid black; }
回答by Shaun Hare
Add a class to the li of last or if css3 is acceptable
添加一个类到最后的 li 或者如果 css3 是可以接受的
ul.test>li:last-of-type { border-bottom:none }
ul.test>li:last-of-type { border-bottom:none }
回答by jonezy
you can use jquery too
你也可以使用 jquery
$('ul li:last-child').css('border-bottom', 'none');
I prefer this way as it means less jumping around and crazy weird exceptions in your css.
我更喜欢这种方式，因为它意味着你的 css 中更少的跳跃和疯狂的奇怪异常。
回答by Monyane Ramollo
Please add class to this :
请添加类：
li:last-child { border-bottom: none; }
li:last-child { border-bottom: none; }
