CSS ul li：避免双边框

Question

我有

的UL

border: 1px solid grey;

它包含几个LI

border-bottom: 1px dotted grey;

以视觉方式保持物品分开。但现在最后一个LI有虚线边框和UL固体边框！这看起来很烦人。我怎么能避免这种情况？有没有办法在LI之间放置边界而不是在它们之后？

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

Answer 2

一个流畅的解决方案是使用plus (+) selector来设置列表样式：

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

您只需添加the following css：

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

您可以避免添加额外的选择器，并且能够使代码更加干净。虽然根据您的需要，您可能需要先检查browser compatibilty。

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; }

Answer 4

只需在指定不显示边框的最后一个li添加另一个类。