不同的填充，如果下次div有同一类以前

Question

我想给下缘，底部具有同一类的兄弟姐妹，除了: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>

这是最接近我可以帮你。此外，它看起来像你的逻辑不一致。