suse中的伪代码不选择除最后一个子项之外的所有内容

Question

我对scs完全陌生，对以下内容感到困惑：首先在scs中，

我有如下的index.html代码，

<div class="col-1-of-2 test">
<h3 class="heading-tertiary u-margin-bottom-small">You are going to fall in love with nature</h3>
<p class="paragraph">asdasdasd</p>
<h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
<p class="paragraph">asdsad</p>
<h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
<p class="paragraph">asdsad</p>
<a href="#" class="btn-text">Click</a>
</div>

我试着选择除最后一段外的每一段，但它实际上匹配了所有段落，你能告诉我原因吗？

.paragraph {
&:not(:last-child) {
border: 1px solid green;
}
}

Answer 1

您不能：CSS伪选择器:last-child不能这样工作。:last-child应用于父元素中的最后一个子元素。在您的情况下，由于.paragraph不是最后一个子项，因此不会选择它。您想使用:last-of-type代替：

.paragraph:not(:last-of-type) {
border: 1px solid green;
}

<div class="col-1-of-2 test">
<h3 class="heading-tertiary u-margin-bottom-small">You are going to fall in love with nature</h3>
<p class="paragraph">asdasdasd</p>
<h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
<p class="paragraph">asdsad</p>
<h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
<p class="paragraph">asdsad</p>
<a href="#" class="btn-text">Click</a>
</div>