html - css - 将相同的类分组在一起

Question

我目前的结构是这样的:

<div class="a">Something</div>
<div class="a">Something</div>
<div class="a">Something</div>
<div class="b">Something</div>
<div class="b">Something</div>
<div class="a">Something</div>

如何将相同的类组合在一起？在这个例子中，我想让所有 a 类元素之间没有边距，所有 b 类元素之间没有边距，但是它们应该在不同类之间有边距。

通过以下路径在一定程度上是可能的:

div {
 margin-top: 20px;
}
.a+.a, .b+.b {
 margin-top: 0px
}

但是我的整个 html 结构都与 margin-bottoms 一起工作——因此我正在寻找一个类似的解决方案，它可以与 margin-bottom 而不是 margin-top 一起工作。

Answer 1

可以使用兄弟选择器。我在 divs 下面的代码片段中添加了一个 span 来说明这一点。您可以使用 class 或 id 将边距设置为 span，但通过这种方式您可以更普遍地应用它，无论您在什么地方有 div 后跟 span，都可以执行边距(或您想要应用的任何样式)

div, span{
    border: 1px solid blue;
    display:block;
    width: 100px;
    height: 30px;
}
div + span {
    margin:10px;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<span>1</span>
<div>5</div>