我想在页眉之间附加空白，
<h2></h2>
{20px} test
<h3></h3>
{40px} test
<h4></h4>
{60px} test
我差点就做到了，但是我不能一CSS而就地覆盖CSS。
https://codepen.io/ryuta69/pen/gOpzRNg
h2 ~ *:not(h2):not(h3):not(h4) {
margin-left: 20px;
}
h3 ~ *:not(h2):not(h3):not(h4) {
margin-left: 40px;
}
h4 ~ *:not(h2):not(h3):not(h4) {
margin-left: 60px;
}
h2 {
margin-left: 0px !important;
}
h3 {
margin-left: 20px !important;
}
h4 {
margin-left: 40px !important;
}<h2>test</h2>
<p>testtest</p>
<h3>test</h3>
<p>testtest</p>
<h4>test</h4>
<p>testtest</p>
<h2>test</h2>
<p>testtest</p>
<h3>test</h3>
<p>testtest</p>
<h4>test</h4>
<p>testtest</p>如您所见，我无法在第4节及其后面添加适当的边距。我知道
h2 ~ *:not(h2):not(h3):not(h4) {
---
}
这将在所有元素末尾选择h2，但是我应该仅选择h2 ~ any_element ~ {h2,h3,h4}。但是，我仍然不知道该怎么做。
感谢您的任何帮助。
如何通过将内容包装在div中来简化整个过程呢？当您具有父元素时，缩进确实更好地工作。
.article div {
margin-left: 20px;
}<body class="article">
<h2>test</h2>
<div>
<p>testtest</p>
<h3>test</h3>
<div>
<p>testtest</p>
<h4>test</h4>
<div>
<p>testtest</p>
</div>
</div>
<h2>test</h2>
<div>
<p>testtest</p>
<h3>test</h3>
<div>
<p>testtest</p>
<h4>test</h4>
<div>
<p>testtest</p>
</div>
</div>
</div>
</div>
</body>