CSS ul li：避免双边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4165384/
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
CSS ul li: Avoiding double borders
提问by MrBubbles
I have a UL with
我有一个 UL
border: 1px solid grey;
it contains several LIs with
它包含几个 LI
border-bottom: 1px dotted grey;
to keep the items apart visually. But now the last LI has the dotted border and the UL solid border! This looks annoying. How can I avoid that? Is there a way to put borders between LIs instead of after them?
使物品在视觉上分开。但是现在最后一个 LI 有虚线边框和 UL 实线边框！这看起来很烦人。我怎样才能避免这种情况？有没有办法在 LI 之间放置边界而不是在它们之后？
回答by FatherStorm
CSS3 selectors can target :first-childor :last-child, like this:
CSS3 选择器可以定位:first-child或:last-child，如下所示：
ul {
border: 1px solid grey;
}
li {
border-bottom: 1px dotted grey;
}
li:last-child {
border:none;
}
A working example: http://api.fatherstorm.com/test/4165384.php
回答by Mikkel R. Lund
A smooth solution is to use the plus (+) selectorto style the list:
一个平滑的解决方案是使用加号 (+) 选择器来设置列表样式：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
You just add the following css:
您只需添加以下 css：
li + li {
border-top: 1px dotted grey;
}
You avoid adding an extra selector and are able to keep the code more clean. Though depending on your needs you might want to check browser compatibiltyfirst.
您可以避免添加额外的选择器，并且能够使代码更干净。尽管根据您的需要，您可能需要先检查浏览器兼容性。
回答by MatTheCat
Use a class or the CSS3 selector :last-childto remove the last <li>border-bottom
使用类或 CSS3 选择器:last-child删除最后一个<li>边框底部
ul li:last-child { border-bottom:0; }
or
或者
<ul>
<li>1</li>
<li>2</li>
<li class="last">3</li>
</ul>
ul li.last { border-bottom:0; }
回答by Dave Kiss
Just add a different class to the last liwhich specifies to not show a border.
只需在最后li一个指定不显示边框的类中添加一个不同的类。
