根据标题缩进内容

Question

我正在尝试获得一种缩进样式，如下所示

H1
Content here
    H2
    Any content after the H2, paragraphs, images, etc
        H3
        Any content after the H2, paragraphs, images, etc
    H2
    content
H1 another top level heading
etc

示例 html：

<h1>heading 1</h1>
<p>content</p>
<h2>heading 2</h2>
<p>content</p>
<p>content</p>
<h3>heading 2</h3>
<p>content</p>
<img src="something.png" />
<p>content</p>
<h1>heading 1</h1>
<p>content</p>

我试过以下

h2, h2 + * {
    margin-left: 30px;
}

h3, h3 + * {
    margin-left: 60px;
}

但这只会在标题后的第一个元素上设置边距，我需要所有后续标签，直到下一个。

有任何问题请追问。

我想指出的是，我无法重写 hml，因为我将它应用到已经创建了许多页面的网站。

一些示例代码https://codepen.io/User1972/pen/WZyKNR

Answer 1

我会这样做：https : //codepen.io/andrasadam93/pen/dVKedR 这样您就可以轻松地缩放它以进一步缩进，通过添加 id 或更多类来修改每个部分，并在以后获得您想要的结果具体案例也一样。

.first{
  margin-left:0;
}
.second{
  margin-left:30px;
}
.third{
  margin-left:60px;
}

<div class="first">
  <h1>Hello</h1>
  <p>Some content here</p>
  <div class="second">
    <h2>Hello second</h2>
    <p>Also some content here</p>
    <div class="third">
      <h3>Hello third</h3>
      <p>Also some content here</p>
    </div>
    <p>Some further content in the second indentation</p>
  </div>
  <p>This is also some content in the first indentation</p>
</div>