css 每个div后的分隔符,最后一个除外

rggaifut  于 2023-04-23  发布在  其他
关注(0)|答案(7)|浏览(192)

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

.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的最后一个子元素后无用的水平线?(无用,因为没有下一篇文章,所以不需要分离)

kxkpmulp

kxkpmulp1#

使用CSS:

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

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

de90aj5v

de90aj5v2#

使用:last-child伪选择器:

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

基本上,这个选择器所做的就是询问问题“* 我是我父元素的最后一个直接子元素吗?*”,如果是,则应用规则。

注意::last-child,和:first-child一样,经常被CSS初学者误解。它不是意思是“* 找到我的最后一个子元素 *”。

.article { margin-bottom: 20px; padding-bottom:20px; border-bottom: 1px solid #EEE; }
.article:last-child {
   border-bottom: 0 none;
}
<div id="articles">
  <div class="article">Hello1</div>
  <div class="article">Hello2</div>
  <div class="article">Hello3</div>
  <div class="article">Hello4</div>
</div>

在这里找到更多关于它的信息:
https://css-tricks.com/almanac/selectors/l/last-child/

c7rzv4ha

c7rzv4ha3#

就像这样

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

.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>
6jjcrrmo

6jjcrrmo4#

有一些其他的解决方案,这个问题是值得一提的。

:第一个孩子

您可以使用:first-child沿着在teach元素的顶部设置边框-第一个子元素然后删除第一个元素上的边框,视觉输出是相同的。
由于:first-child在css 2规范中,您可以指望比:last-child更广泛的浏览器支持。这肯定是一个边缘情况,但可以想象的是,特别是考虑到所讨论的浏览器是IE。
它在浏览器中也是easier to compute,而不是last child。浏览器不需要做任何事情来查看所有元素并计算出最后一个,它可以只在匹配的第一个停止。如果你的前端很复杂,值得考虑。

相邻选择器

相邻选择器规则允许你只在一个元素有另一个指定类型的元素作为兄弟的时候才把它作为目标。所以:

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

将在p标签上设置边框顶部,只有在p标签之前。
同样,这将涵盖边缘情况浏览器:last-child可能不会,虽然我认为它被引用为性能问题,遭受类似的问题:last-child。
More info

A类

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

nnsrf1az

nnsrf1az5#

我更喜欢使用: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。

8gsdolmq

8gsdolmq6#

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

vohkndzv7#

使用.article:last-child { border-bottom: none; }每个其他.article元素将具有定义的样式(/边框)!

相关问题