css - 有没有办法在 css 中自动缩进嵌套部分？

Question

我有这个代码:

<section>
  <h1>Test</h1>
  <p>Text</p>
  <section>
    <h1>Test2</h1>
    <p>Text2</p>
  </section>
</section>

我希望它看起来有类似的缩进:

<h1>Test</h1>
<p>Text</p>
<h2 style="margin-left: 40px">Test2</h2>
<p style="margin-left: 40px">Text2</p>

Answer 1

您可以只在 section 元素上使用 margin-left，但不能在第一个元素上使用。

section:not(.first) {
  margin-left: 40px;
}

<section class="first">
  <h1>Test</h1>
  <p>Text</p>
  <section>
    <h1>Test2</h1>
    <p>Text2</p>
    <section>
      <h1>Test3</h1>
      <p>Text3</p>
    </section>
  </section>
</section>