css :最后一个孩子不影响我的最后一个元素

Question

我有以下示例，其中最后一个 使用 ：最后一个孩子时似乎不起作用。 在我的代码中，您可以看到当我使用类"aa"引用最后一个元素时，它显示"+ Add">

&.aa {}

但是如果我评论掉

&.aa{}

并将其设置为

&:last-child{}

最后一个"+ 添加">

未显示。 我错过了什么吗？

Answer 1

这是因为您的 HTML 结构中有拼写错误。

所以你当前的结构是这样的：

<ul>
<li class="item">
<div>
Tom Hanks
<br /> Jenny Hanks
</div>
</li>
<li class="item active">
<div>
Henry Fonda
<br /> Valarie White
</div>
</li>
<li class="aa">
&nbsp;
</li>
<ul>

正如我们所看到的，您没有正确关闭ul元素，因此它的最后一个子元素不会被视为：

<li class="aa">
&nbsp;
</li>

它将忽略此元素作为最后一个子元素，因此&:last-child将无法按预期工作。 您需要做的就是正确关闭元素。

所以它应该是这样的：

<ul>
<!--> ul inner elements <-->
</ul>

现场演示：codepen.io