我使用li来显示记录列表。
每个李有一个底边:1px纯黑色;
但我不想在李的尽头显示边界?
例:
.test li{
height:1%;
overflow:hidden;
padding:4px 0;
margin:-1px 0 0;
border-bottom: 1px solid black;
}
.test li.last { border-bottom: none; }
<ul class="test">
<li> Foo 1 </li>
<li> Foo 2 </li>
<li> Foo 3 </li>
</ul>
Foo 3仍显示底部边框。
您也可以设置顶部边框,并使用兄弟选择器来处理此问题,而无需额外的类:
.test li{
height:1%;
overflow:hidden;
padding:4px 0;
margin:-1px 0 0;
}
.test li + li { border-top: 1px solid black; }
.test li{
height:1%;
overflow:hidden;
padding:4px 0;
margin:-1px 0 0;
border-bottom: 1px solid black;
}
.test li:last-child { border-bottom: none; }
将类添加到最后的li或者css3是否可接受
ul.test> li:last-of-type {border-bottom:none}
你也可以使用jquery
$('ul li:last-child').css('border-bottom', 'none');
我更喜欢这种方式,因为它意味着你的css中跳跃较少和疯狂的异常异常。
请为此添加课程:
li:last-child { border-bottom: none; }