Question

在每篇文章之间，我有一个水平分隔符：

.article {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

<div id="articles">
    <div class="article">Hello1</div>
    <div class="article">Hello2</div>
    <div class="article">Hello3</div>
    <div class="article">Hello4</div>
</div>

如何使用CSS删除#articles的最后一个孩子之后无用的水平线？（没用，因为没有下一篇文章，所以不需要分离）

Answer 1

使用这个CSS：

.article:last-child { border-bottom: none; }

DEMO：https://jsfiddle.net/lmgonzalves/r8pbLaas/

Answer 2

使用:last-child伪选择器：

.article:last-child { border-bottom: none; }

基本上，这个选择器的作用是问问题＆＃34; 我是我父母的最后一个直接子元素吗？＆＃34;，如果是，则应用规则。

注意： :last-child以及:first-child经常被CSS初学者误解。它确实不意味着＆＃34; 找到我的最后一个子元素＆＃34;。

＆＃13;

.article { margin-bottom: 20px; padding-bottom:20px; border-bottom: 1px solid #EEE; }
.article:last-child {
   border-bottom: 0 none;
}

＆＃13;

<div id="articles">
  <div class="article">Hello1</div>
  <div class="article">Hello2</div>
  <div class="article">Hello3</div>
  <div class="article">Hello4</div>
</div>

＆＃13;

在此处查找有关它的更多信息：

https://css-tricks.com/almanac/selectors/l/last-child/

Answer 3

我更喜欢使用:first-child代替:last-child，因为 IE7 + 支持JSFiddle}：

.article { 
    padding: 20px 0;
    border-top: 1px solid #eee;
}

    .article:first-child {
        padding-top: 0;
        border-top: 0;
    }

<div id="articles">
    <div class="article">Hello1</div>
    <div class="article">Hello2</div>
    <div class="article">Hello3</div>
    <div class="article">Hello4</div>
</div>

请参阅浏览器对:first-child vs :last-child的支持。

Answer 4

还有一些其他解决方案值得一提。

<强>：第一子

您可以使用:first-child并在示教元素的顶部设置边框 - 第一个孩子然后移除第一个元素上的边框，并且视觉输出是相同的。

由于:first-child位于css2规范中，因此您可以依靠比:last-child更广泛的浏览器支持。这是一个肯定的边缘情况，但可以想象会被击中，特别是考虑到有问题的浏览器是IE。

浏览器中的easier to compute也是最后一个孩子。浏览器不需要做任何事情来查看所有元素并计算出最后一个元素，它可以在第一个匹配时停止。值得考虑你的前端是否复杂。

相邻选择器

相邻的选择器规则允许您仅在元素具有指定类型的另一个元素作为兄弟时才能定位元素。所以：

p + p { border-top: 1px solid #888; }

只有p标记前面的<{1}}标记才会设置边框顶部。

同样，这将涵盖边缘案例浏览器：虽然我认为它被引用为性能问题，但最后一个孩子可能不会出现类似问题：最后一个孩子。

More info

一个班级

您也可以在最后一个元素上使用一个类。虽然这对于这个问题在视觉上是不必要的，但是如果你想用最后一个元素做更复杂的事情，或者由于某种原因包含的HTML可能会改变，那么值得考虑。

Answer 5

像这样的东西

.article:not(:last-child) {
    margin-bottom: 20px;
    padding-bottom:20px;
    border-bottom: 1px solid #EEE;
}

<div id="articles">
    <div class="article">Hello1</div>
    <div class="article">Hello2</div>
    <div class="article">Hello3</div>
    <div class="article">Hello4</div>
</div>

OR

 .article {
   margin-bottom: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #EEE;
 }
 .article:last-child {
   border-bottom:0;
 }

<div id="articles">
  <div class="article">Hello1</div>
  <div class="article">Hello2</div>
  <div class="article">Hello3</div>
  <div class="article">Hello4</div>
</div>

Answer 6

.article:not(:last-child) {
    border-bottom: 1px solid #eee;
}

Answer 7

使用.article:last-child { border-bottom: none; } 每个其他.article元素将具有已定义的样式（/ border）！

每个div之后的分隔符，除了最后一个

7 个答案: