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上消失。

＆＃13;

.wrapper {
    width: 10em;
    margin: 1em;
}
.wrapper:last-child {
    border-bottom: 1px solid #999;
}
.slab {
    background-color: #eee;
    border-top: 1px solid #999;
    padding: 1em;
}

＆＃13;

<div class="wrapper">
    <div class="slab">Hello</div>
    <div class="slab">Hello</div>
    <div class="slab">Hello</div>
</div>
<!--<div class="something">New</div>-->

＆＃13;

案例2 - 使用.slab:last-child

事实证明这无处不在 - JSFiddle，Chrome，codepen.io和Stackoverflow。但我认为选择的确是针对 .slab的最后一个孩子而不是最后一个.slab

＆＃13;

.wrapper {
    width: 10em;
    margin: 1em;
}
.slab {
    background-color: #eee;
    border-top: 1px solid #999;
    padding: 1em;
}
.slab:last-child {
    border-bottom: 1px solid #999;
}

＆＃13;

<div class="wrapper">
    <div class="slab">Hello</div>
    <div class="slab">Hello</div>
    <div class="slab">Hello</div>
</div>

＆＃13;

问题：

.slab:last-child是.slab的最后一个孩子还是.slab的最后一个孩子？
在案例1 中，为什么引入无关元素border-bottom后.something消失？
将border-bottom应用于上一个.slab的最佳方法是什么？

Answer 1

.slab:last-child是.slab的最后一个孩子还是.slab的最后一个孩子？

都不是。它匹配
元素
- 有＆＃34; slab＆＃34; class，和
- 是其父母的最后一个孩子。
其父母中的最后一个.slab可能不一定是其最后一个孩子。当{且仅当两个条件对于给定元素都为真时，.slab:last-child将匹配。
在案例1 中，为什么引入无关元素border-bottom后.something消失了？

因为.wrapper的父项的最后一个子项成为其他元素。这个元素与.wrapper无关 - 它与它的下一个兄弟相关。

该包装中的.slab元素永远不会接收边框;边框正在应用于.wrapper，只要它是其父级的最后一个子级。（顺便提一下，示例中的.wrapper的父级隐含为body。）
将border-bottom应用于上一个.slab的最佳方法是什么？

你无法可靠地做到这一点，除非你能保证.wrapper唯一可能的孩子是.slab个元素，在这种情况下，类名变得无关紧要（但是您仍然可以将其包含在您的选择器中，以便在.wrapper

时，避免匹配.slab的最后一个孩子。

Answer 2

:last-child structural pseudo-class selector适用于父母的兄弟姐妹。它相当于:nth-last-child(1)，

就您的代码而言，您应将:last-child应用于.slab以选择父div.wrapper的最后一个兄弟。

如果div.wrapper的最后一个孩子没有slab课程，那么选择器就不会匹配。它什么都不做。

如果:last-child已应用于div的{{1}}个孩子，请执行以下操作：

div.wrapper

...然后，无论.wrapper > div:last-child { ... }，class或其他属性如何，选择器都会匹配最后一个孩子。它会匹配任何id。如果最后一个孩子不是div，则选择器将不执行任何操作。

如果您想匹配div的最后一个孩子，无论任何 - 意味着它只需要成为最后一个孩子 - 那么您可以这样做：

div.wrapper

如果没有.wrapper > *:last-child { ... }子组合子，请说>，所有后代父元素的最后一个子元素将匹配。

当您选择.wrapper *:last-child { ... }时，您将使用类.wrapper:last-child定位该元素，该类是其父级的最后一个子级（在这种情况下可能是wrapper）。

如果body是其父级的唯一子级，则div.wrapper，:last-child，:first-child和大多数其他结构伪类关键字选择器将匹配。

为了更好地理解这些选择器（以及所有其他选择器），请参阅CSS规范的这一部分： http://www.w3.org/TR/css3-selectors/#selectors

Answer 3

last-child意味着所说的......最后一个元素，它是父母的孩子。

不是最后一个......最后一个元素。

没有last-of-class选择器。

这：.slab:last-child表示也的最后一个孩子的.slab类。

如果它不是最后一个孩子，它将不适用，同样，如果它没有.slab类，它将不会被选中。

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

3 个答案: