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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

试试这个

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

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

3 个答案: