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

一个流畅的解决方案是使用加号(+)选择器来设置列表的样式:

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

你只需添加以下css:

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

您可以避免添加额外的选择器,并且能够使代码更加干净.虽然根据您的需要,您可能需要先检查浏览器兼容性.