使用CSS的标题层次结构中段落的绝对缩进

Question

我正在尝试格式化一个文档，该文档由标题的嵌套层次结构大纲组成，其中段落出现在层次结构的任何级别。这就是我想要实现的目标：

这里的关键是段落需要缩进相同的数量，而不管它们出现的层次结构中的级别如何。到目前为止，这是我的html和CSS：

<style>
    .topLevel {
        position: relative;
        font-size: 30px;
    }
    .sublevel {
        position: relative;
        font-size: smaller;
        left: 30px;
    }
    .paragraph {
        position:relative;
        left: 30px;
        font-size: medium;
        color: red;
    }
</style>

<div class="topLevel">
    Heading Level 1
    <div class="sublevel">
        Heading Level 2
        <div class="paragraph">Paragraph 1</div>
        <div class="sublevel">
            Heading 3
            <div class="paragraph">Paragraph 2</div>
        </div>
    </div>
</div>

结果就是这样（忽略字体差异）：

任何想法如何让Paragraph的左侧位置全部相同，同时允许它们在它们所属的整个文档中垂直显示？请注意，该文件是动态的;标题和段落可以添加和移动，文档需要保留大纲流程，如我所指出的那样。例如，像Microsoft Word文档。感谢您的帮助。

我应该注意，由于业务逻辑，这在我的应用程序中实现为具有可以展开和折叠的节点的树结构。所以使用html h1，h2元素的简单解决方案似乎不是一个可行的选择。

Answer 1

通过使用直接子选择器>，你应该能够实现这一点，你可以在那里设置你需要的关卡数量，也许这样的事情可以给你一个开始

注意，我将您的left: 30px更改为margin-left: 30px，这应该更合适

.topLevel {
  position: relative;
  font-size: 30px;
}
.sublevel {
  position: relative;
  font-size: smaller;
  margin-left: 30px;
}
.paragraph {
  position: relative;
  margin-left: 15px;
  font-size: medium;
  color: red;
}
.sublevel > .paragraph {                                /*  level 2  */
  margin-left: -15px;
}
.sublevel > .sublevel > .paragraph {                    /*  level 3  */
  margin-left: -45px;
}
.sublevel > .sublevel > .sublevel > .paragraph {        /*  level 4  */
  margin-left: -75px;
}

<div class="topLevel">
  Heading Level 1
  <div class="paragraph">Paragraph 1</div>
  <div class="sublevel">
    Heading Level 2
    <div class="paragraph">Paragraph 2</div>
    <div class="sublevel">
      Heading 3
      <div class="paragraph">Paragraph 3</div>
      <div class="sublevel">
        Heading 4
        <div class="paragraph">Paragraph 4</div>
    </div>
    </div>
  </div>
</div>