有没有办法在 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>

Answer 2

如果您不想添加任何类，也可以尝试此操作：

section > section {
  margin-left: 40px;
}

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

这将为作为部分的直接子级的每个部分添加 40px 的左边距。

Answer 3

试试这个

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