SASS从最后一个元素中选择最后一个元素

Question

我很难在最后一个class =“list-group”的最后一个class =“separator”中添加边框。 我想在SASS中这样做。有人可以帮助我，因为我的解决方案不起作用。

HTML

<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator"></div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator"></div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator"></div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator"></div>
</div>

CSS

.list-group {
    &:last-child .separator {
        border-left: 1px solid black;
    }
 }

Answer 1

据我所知，你的sass代码没有问题。只需将一些内容添加到html中，浏览器就会开始显示边框。像这样的东西

<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator">item1</div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator">item2</div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator">item3</div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator">item4</div>
</div>

输出（供您参考）：

你能看到item4的左边框吗？