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>

输出（供您参考）：

你能发现第 4 项的左边框吗？

Answer 2

可以使用last-child伪元素来指定最后一个子元素

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