是否可以根据纯CSS的子类在父div之间添加边距

Question

我有多个<div>包装一些具有class的子级。但问题是父<div>没有class或id。是否可以在包装父div之间添加一个margin-bottom，该div有一个特定的child，只使用纯CSS？或者我需要使用jQuery或JS来实现这一点？

HTML的外观示例：

// parent 
<div> 
// children
<h2 class="child-class-1" ></h2>     
<p class="child-class-2" ></p>
</div>

// margin-bottom between the wrapping parent divs

<div>
<h2 class="child-class-1" ></h2>    
<p class="child-class-2" ></p>
</div>

我找到了一个使用纯CSS的解决方案。

此处的解决方案：

div > .child-class-1, .child-class-2 {
margin-bottom: 80px;
}

<div style="background-color:red; height: 400px; width:400px;"> 
<h2 class="child-class-1" ></h2>     
<p class="child-class-2" ></p>
</div>

<div style="background-color:red; height: 400px; width:400px;">
<h2 class="child-class-1" ></h2>    
<p class="child-class-2" ></p>
</div>

<div style="background-color:red; height: 400px; width:400px;">
<h2></h2>    
<p>Dosent affect the div which dosen't have the child class</p>
</div>

Answer 1

也许您可以在HTML中添加具有外部/内部样式的<div>标记的属性，但它会影响当前/所有HTML页面中的所有标记

css代码示例：

div {
margin-bottom: 12px
}

或者你可以只为一个<div>添加自定义样式，只使用内联样式，你可以使用：

<div style="margin-bottom:12px">
<h2 class="child-class-1" ></h2>    
<p class="child-class-2" ></p>
</div>

但这很麻烦，因为你的HTML 中有另一个<div>