html - 最后一个 child 不删除边框底部

Question

HTML:

<div class="offer-section">
    <div class="divider"></div>
</div>
<div class="offer-section">
    <div class="divider"></div>
</div>
<div class="offer-section">
    <div class="divider"></div>
</div>
<div class="offer-section">
    <div class="divider"></div>
</div>

CSS:

.offer-section{
   .divider { border: solid 1px #bdbdc3; height: 2px; margin-top: 5%; }
}
.offer-section:last-child {
   .divider { }
}

尝试在除最后一个以外的每个报价部分 div 的底部添加一个分隔线。但是上面的代码似乎无法完成这项工作。非常感谢任何帮助:)

Answer 1

您需要根据要求提供适当的 CSS 属性，如下所示。

.offer-section{
  .divider { border: solid 1px #bdbdc3; height: 2px; margin-top: 5%; }
}
.offer-section:last-child {
  .divider { border: none; }
}