删除最后一个边框底部？答案

【问题标题】：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

标签： css html-lists border css-selectors

【解决方案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; }

【讨论】：