我只想添加一个 border-bottom
到最后.slab
我尝试了一些东西,但我无法理解发生了什么。
案例 1 - 使用 .wrapper:last-child
如果我在 codepen.io 上尝试这个或者在 Stackoverflow 片段上,我没有得到 border-bottom
最后 .slab
如果我在 JSFiddle 上尝试这个或者在 Chrome 中单独运行代码,我得到一个 border-bottom
最后 .slab
.但是,如果我取消注释 <div class="something">New</div>
, 然后是 border-bottom
最后 .slab
在 JSFiddle 和 Chrome 中都消失了。
.wrapper {
width: 10em;
margin: 1em;
}
.wrapper:last-child {
border-bottom: 1px solid #999;
}
.slab {
background-color: #eee;
border-top: 1px solid #999;
padding: 1em;
}
<div class="wrapper">
<div class="slab">Hello</div>
<div class="slab">Hello</div>
<div class="slab">Hello</div>
</div>
<!--<div class="something">New</div>-->
案例 2 - 使用 .slab:last-child
事实证明这在任何地方都有效——JSFiddle、Chrome、codepen.io 和 Stackoverflow。但我认为这个选择真的是为 的最后一个 child .slab
而不是最后一个.slab
.wrapper {
width: 10em;
margin: 1em;
}
.slab {
background-color: #eee;
border-top: 1px solid #999;
padding: 1em;
}
.slab:last-child {
border-bottom: 1px solid #999;
}
<div class="wrapper">
<div class="slab">Hello</div>
<div class="slab">Hello</div>
<div class="slab">Hello</div>
</div>
问题:
- 是否
.slab:last-child
表示.slab
的最后一个 child 或最后一次出现.slab
? - 在情况 1 中,为什么
border-bottom
引入无关元素后消失.something
? - 最好的申请方式是什么
border-bottom
到最后.slab
?
最佳答案
-
Does
.slab:last-child
mean the last child of.slab
or the last occurrence of.slab
?都没有。它匹配一个元素
- 有“slab”类,并且
- 是其 parent 的最后一个 child 。
最后.slab
在它的 parent 中不一定是它的最后一个 child 。.slab:last-child
当且仅当给定元素的两个条件都为真时才会匹配。 -
In case 1, why is the
border-bottom
vanishing after the introduction of an unrelated element.something
?因为那是
.wrapper
的父级的最后一个子级成为另一个元素。此元素与.wrapper
不无关系— 它与它相关,是它的下一个 sibling 。.slab
该包装器中的元素从不接收边框;边框被应用于.wrapper
只要它是它的 parent 的最后一个 child 。 (顺便说一下,您的示例中.wrapper
的父级隐含为body
。) -
What is the best way to apply
border-bottom
to the last.slab
?除非你能保证
.wrapper
的唯一可能的 child ,否则你将无法可靠地做到这一点。是.slab
元素,在这种情况下,类名就变得无关紧要了(但你仍然可以将它包含在你的选择器中,这样你就可以避免匹配.wrapper
的最后一个 child ,当它不是.slab
时)。
关于html - 如何使用:last-child selector?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34462747/