不同的填充，如果下一个 div 与前一个具有相同的类

Question

除了:last-child:last-child之外，我想为具有相同班级的兄弟姐妹提供较低的底边距

<style>
    .text {
        margin-bottom: 20px;
    }
</style>
<div class="text"></div>
<div class="text"></div>
<div class="text myText"></div> <!-- margin-bottom this 5px; -->
<div class="text myText"></div> <!-- margin-bottom this 5px; -->
<div class="text myText"></div> <!-- margin-bottom this 20px; -->
<div class="text"></div>
<div class="text myText"></div> <!-- margin-bottom this 20px; -->
<div class="text"></div>

Answer 1

由于 CSS 没有上一个或父级选择器，您可以通过这种方式使用 margin-top：

.myText + .myText {margin-top: 5px;}
.text:not(.myText) + .myText,
.myText + .text:not(.myText) {margin-top: 20px;}

div {border: 1px solid #99f;}

.text:not(.myText) + .myText:last-of-type,
.text:not(.myText) + .myText:last-of-type {margin: 0;}

<div class="text">No Bot Margin</div>
<div class="text">No Bot Margin</div>
<div class="text myText">margin-bottom this 5px;</div> <!-- margin-bottom this 5px; -->
<div class="text myText">margin-bottom this 5px;</div> <!-- margin-bottom this 5px; -->
<div class="text myText">margin-bottom this 20px;</div> <!-- margin-bottom this 20px; -->
<div class="text">No Bot Margin</div>
<div class="text myText">margin-bottom this 20px;</div> <!-- margin-bottom this 20px; -->
<div class="text">No Bot Margin</div>

这是我能找到的最接近你的地方。而且看起来你的逻辑并不一致。