基于标题标签的缩进答案

【问题标题】：Indent based on header tag基于标题标签的缩进
【发布时间】：2018-06-07 21:37:29
【问题描述】：

我有一个结构如下的 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>

【问题讨论】：

将其包裹在<ul> 中并嵌套它们？
哦，我应该提到这是在 Wordpress 中使用的，我不希望用户必须添加任何 html 标签。
然后他们可以访问富文本编辑器...他们只需要单击旁边带有数字的项目符号...？
我再次编辑了我的问题并添加了更多示例，说明每个标题下可能包含的内容以进一步澄清（抱歉，我仍在学习如何提交明确的问题呵呵）
所有内容都在h2标签还是p标签中？请提供您的 HTML 代码。

标签： html css wordpress

【解决方案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;
}

【讨论】：