基于标头标记缩进

Question

我有一个wordpress网站，其结构如下：

1.0标题

内容

1.1另一个标题

内容

等。没什么特别的。根据标题标记，我想要做的就是拥有每个标题意图下的所有内容。所以最终输出看起来像这个例子：

    1.0 TitleName1 
        Paragraph
        Image
        Numbered List      
        1.1 SubTitleName1
            Image
            Paragraph
        1.2 SubTitleName2
            Paragraph
            1.2.1 SubSubTitleName
               Video
    2.0 TitleName2

我尝试使用

h2 ~ *:not(h2) {
    margin-left: 25px;
}

但这只有在我跳回另一个<h2>时才有效。如果没有用户将其内容包装在html标签中，这甚至可以实现吗？

在每个标题下面可能会混合使用（段落，列表，图像等）。示例代码：

<h2>1.0 Title</h2>
<p>Stuff and things</p>
<h2>1.1 Another Title</h2>
<p>More stuff</p>
<img>Image.jpeg</img>
<h2> 1.2 Another Title</h2>
<li>bla bla</li>
<h3> 1.2.1 Another title </h3>
<p> more text </p>
<a href=something.html>Link</a>

Answer 1

我发现完全相同的问题已经回答：

CSS - successive indenting of siblings after headings

h2 ~ *:not(h1):not(h2) {
  margin-left: 2em;
}
h3 ~ *:not(h1):not(h2):not(.h2):not(h3) {
  margin-left: 3em;
}
h4 ~ *:not(h1):not(h2):not(.h2):not(h3):not(.h3):not(h4) {
  margin-left: 4em;
}