Html 在 CSS 中删除第一个孩子的上边框和最后一个孩子的下边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11055135/
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 top border of first child and bottom border of last child in CSS
提问by Hommer Smith
I have the following HTML:
我有以下 HTML：
<ul>
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FOURTH</li>
<ul>
And the following CSS:
以及以下 CSS：
li
{
border-top:1px solid #FFF;
border-bottom: 1px solid #D0D0D0;
}?
How can I remove the top border for the first LI element, and the bottom border for the last LI element? ?
如何删除第一个 LI 元素的顶部边框和最后一个 LI 元素的底部边框？?
回答by CKKiller
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}
Just like that.
就这样。
回答by Reggie Pinkham
Use the CSS :notselector to apply styles only where required—rather than adding then removing them.
使用 CSS:not选择器只在需要的地方应用样式——而不是添加然后删除它们。
For example,
例如，
body {
background: #acc;
}
li:not(:first-child) {
border-top: 1px solid #fff;
}
li:not(:last-child) {
border-bottom: 1px solid #000;
}<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>