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

【问题标题】：SASS select last element from a last elementSASS 从最后一个元素中选择最后一个元素
【发布时间】：2017-11-28 17:08:43
【问题描述】：

我很难从最后一个 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;
    }
 }

【问题讨论】：

可以加plunkr吗？
很抱歉我没有帐户。

标签： sass css-selectors

【解决方案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 的左边框吗？

【讨论】：

【解决方案2】：

这对我有用。我知道为时已晚xd

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

【讨论】：