删除最后一个边框底部？

Posted 2023-03-06

【中文标题】删除最后一个边框底部？

【英文标题】：Remove last border-bottom?

【发布时间】：2011-06-30 18:12:56

【问题描述】：

我使用 li 来显示记录列表。

每个li都有一个bottom-border:1px纯黑；

但我不想在 li 的末尾显示边框？

示例：

.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 仍然显示底部边框。

【问题讨论】：

你没有给最后一个 LI 上课last

【参考方案1】：

在 last 的 li 或者 css3 是否可以接受的情况下添加一个类

ul.test>li:last-of-type 边框底部：无

【参考方案2】：

您也可以设置顶部边框并使用兄弟选择器来处理此问题，而无需额外的类：

.test li
        height:1%;
        overflow:hidden;
        padding:4px 0;
        margin:-1px 0 0;
    

.test li + li  border-top: 1px solid black;  

【讨论】：

谢谢，这确实有效，但有效吗？什么是李+李？

@user, w3.org/TR/CSS2/selector.html E + F：匹配任何紧跟在同级元素 E 前面的 F 元素。在这种情况下，它匹配紧跟在 li 前面的任何 li。

【参考方案3】：

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

【参考方案4】：

你也可以使用 jquery

$('ul li:last-child').css('border-bottom', 'none');

我更喜欢这种方式，因为这意味着你的 css 中的跳跃和疯狂的奇怪异常更少。

【讨论】：

:last-child 是一个很好的选择，因为它为每个父元素选择最后一个元素。谢谢！

【参考方案5】：

请为此添加课程：

li:last-child border-bottom: none;