CSS ul li：避免双重边框

Question

I have a UL with

border: 1px solid grey;

它包含几个带有LI标签的元素。

border-bottom: 1px dotted grey;

为了在视觉上区分这些项，我们需要添加边框。但现在最后一个LI有虚线边框，而UL有实线边框！这看起来很烦人。我该如何避免这种情况？是否有一种方法可以在LI之间添加边框而不是在它们之后？

- MrBubbles

---

准确的重复问题：https://dev59.com/EHM_5IYBdhLWcg3wjj4p - Sam Becker

Answer 1

CSS3选择器可以针对:first-child或:last-child进行定位，如下所示：

ul {
    border: 1px solid grey;
}
li {
    border-bottom: 1px dotted grey;
}
li:last-child {
    border:none;
}

一个可用的示例: http://api.fatherstorm.com/test/4165384.php

- FatherStorm

---

哦，我的天啊，那太棒了。谢谢你。 - MrBubbles

请注意，如果您需要支持IE6，则会在该浏览器中出现问题。 - oezi

Answer 2

一种简单的解决方案是使用加号（+）选择器来为列表设置样式：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

您只需要添加以下的CSS：

li + li {
     border-top: 1px dotted grey;
}

您可以避免添加额外的选择器，使代码更加简洁。但是，根据您的需求，您可能需要先检查浏览器兼容性。

- Mikkel R. Lund

---

FatherStorm的解决方案是最常见的（也是我自己的第一反应），但这个更加优雅。 - msanford

Answer 3

使用类或CSS3选择器:last-child来移除最后一个<li>的底部边框。

ul li:last-child { border-bottom:0; }

或者

<ul>
    <li>1</li>
    <li>2</li>
    <li class="last">3</li>
</ul>

ul li.last { border-bottom:0; }

- MatTheCat

Answer 4

只需为最后一个li添加一个不显示边框的不同类即可。

- Dave Kiss