在每篇文章之间,我有一个水平分隔符:
.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
的最后一个子元素后无用的水平线?(无用,因为没有下一篇文章,所以不需要分离)
7条答案
按热度按时间kxkpmulp1#
使用CSS:
DEMO:https://jsfiddle.net/lmgonzalves/r8pbLaas/
de90aj5v2#
使用
:last-child
伪选择器:基本上,这个选择器所做的就是询问问题“* 我是我父元素的最后一个直接子元素吗?*”,如果是,则应用规则。
注意:
:last-child
,和:first-child
一样,经常被CSS初学者误解。它不是意思是“* 找到我的最后一个子元素 *”。在这里找到更多关于它的信息:
https://css-tricks.com/almanac/selectors/l/last-child/
c7rzv4ha3#
就像这样
或
6jjcrrmo4#
有一些其他的解决方案,这个问题是值得一提的。
:第一个孩子
您可以使用
:first-child
沿着在teach元素的顶部设置边框-第一个子元素然后删除第一个元素上的边框,视觉输出是相同的。由于
:first-child
在css 2规范中,您可以指望比:last-child
更广泛的浏览器支持。这肯定是一个边缘情况,但可以想象的是,特别是考虑到所讨论的浏览器是IE。它在浏览器中也是easier to compute,而不是last child。浏览器不需要做任何事情来查看所有元素并计算出最后一个,它可以只在匹配的第一个停止。如果你的前端很复杂,值得考虑。
相邻选择器
相邻选择器规则允许你只在一个元素有另一个指定类型的元素作为兄弟的时候才把它作为目标。所以:
将在
p
标签上设置边框顶部,只有在p
标签之前。同样,这将涵盖边缘情况浏览器:last-child可能不会,虽然我认为它被引用为性能问题,遭受类似的问题:last-child。
More info
A类
你也可以只在最后一个元素上使用一个类。虽然这在视觉上对这个问题来说不是必要的,但是如果你想对最后一个元素做更复杂的事情,或者如果包含的HTML可能会因为某种原因而改变,这是值得考虑的。
nnsrf1az5#
我更喜欢使用
:first-child
而不是:last-child
,因为**IE7+**支持它(JSFiddle):浏览器支持:first-child vs:last-child。
8gsdolmq6#
vohkndzv7#
使用
.article:last-child { border-bottom: none; }
每个其他.article
元素将具有定义的样式(/边框)!