html - 如何使用:last-child选择器？

我只想在最后一个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。但我认为这是最后一个孩子的选择，而不是最后一个孩子的选择

.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是指最后一个.slab的孩子还是最后一个.slab:last-child的出现？
在案例1中，为什么在引入不相关的元素之后.slab消失了？
将.slab应用到最后一个border-bottom的最佳方法是什么？

最佳答案

.slab:last-child是指最后一个.slab的孩子还是最后一个.slab的出现？
也不是。它匹配一个元素
有“slab”类，并且
是其父级的最后一个子级。
其父级中的最后一个.slab不一定是其最后一个子级。.slab:last-child将匹配当且仅当给定元素的两个条件均为true时。
在案例1中，为什么在引入不相关的元素之后border-bottom消失了？
因为然后.something的父元素的最后一个子元素变成另一个元素。这个元素并不与.wrapper无关，它通过成为它的下一个兄弟而与它相关。
包装器中的.wrapper元素永远不会收到边框；只要它是其父级的最后一个子级，边框就一直应用于.slab。（顺便说一下，在您的示例中，.wrapper的父级被暗示为.wrapper）
将body应用到最后一个border-bottom的最佳方法是什么？
除非您能够保证.slab的唯一可能的子元素是.wrapper元素，否则您将无法可靠地执行此操作，在这种情况下，类名将变得非常不相关（但您仍然可以将其包含在选择器中，这样您就可以避免在不是.slab的情况下匹配.wrapper的最后一个子元素）。