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

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.但我认为选择的确是最后一个孩子, .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或最后一次出现.slab？
2. 在案例1中,为什么border-bottom在引入无关元素后消失.something？
3. 申请border-bottom到最后一个的最佳方式是什么.slab？

Answer 1

1. 是否.slab:last-child意味着最后一个子.slab或最后一次出现.slab？

   都不是.它匹配一个元素

   • 有"板"类,和
   • 是其父母的最后一个孩子.

   
   .slab其父母的最后一个可能不一定是它的最后一个孩子..slab:last-child当且仅当两个条件对于给定元素都为真时才匹配.

2. 在案例1中,为什么border-bottom在引入无关元素后消失.something？

   因为那时父母的最后一个孩子.wrapper变成了另一个元素.这个元素与.wrapper它无关- 它与它的下一个兄弟相关.

   .slab包装器中的元素永远不会收到边框; 边框被应用到.wrapper,只要它是最后一个孩子的父母.(顺便提一下,.wrapper你的例子中的父母暗示是body.)

3. 申请border-bottom到最后一个的最佳方式是什么.slab？

   除非你可以保证唯一可能的子元素.wrapper是.slab元素,否则你将无法可靠地执行此操作,在这种情况下,类名称变得非常无关紧要(但您仍然可以将它包含在您的选择器中,以避免匹配最后一个孩子的.wrapper时候它不是一个.slab).