html - 如何使用:last-child selector?

Question

我只想添加一个 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>

问题:

1. 是否.slab:last-child表示 .slab 的最后一个 child 或最后一次出现 .slab ？
2. 在情况 1 中，为什么 border-bottom引入无关元素后消失.something ？
3. 最好的申请方式是什么border-bottom到最后.slab ？

Answer 1

1. 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当且仅当给定元素的两个条件都为真时才会匹配。

2. 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。)

3. What is the best way to apply border-bottom to the last .slab ?

   除非你能保证 .wrapper 的唯一可能的 child ，否则你将无法可靠地做到这一点。是.slab元素，在这种情况下，类名就变得无关紧要了(但你仍然可以将它包含在你的选择器中，这样你就可以避免匹配 .wrapper 的最后一个 child ，当它不是 .slab 时)。