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上の左の境界を見つけることができますか？