根据标题缩进内容

Question

我正在尝试让样式缩进如下

H1
Content here
    H2
    Any content after the H2, paragraphs, images, etc
        H3
        Any content after the H2, paragraphs, images, etc
    H2
    content
H1 another top level heading
etc

示例网页：

<h1>heading 1</h1>
<p>content</p>
<h2>heading 2</h2>
<p>content</p>
<p>content</p>
<h3>heading 2</h3>
<p>content</p>
<img src="something.png" />
<p>content</p>
<h1>heading 1</h1>
<p>content</p>

我尝试了以下方法

h2, h2 + * {
    margin-left: 30px;
}
h3, h3 + * {
    margin-left: 60px;
}

但这只在标题后的第一个元素上设置了一个边距，我需要所有后续标签，直到下一个标签。

如有任何问题，请提出。

我想指出的是，我无法重写 hml，因为我正在将其应用于已经创建了许多页面的网站。

一些示例代码 https://codepen.io/User1972/pen/WZyKNR

Answer 1

我会这样做：https://codepen.io/andrasadam93/pen/dVKedR通过这种方式，您可以轻松地对其进行缩放以进行进一步缩进，通过添加id或其他类来修改每个部分，并在以后的特定情况下获得所需的结果。

.first{
  margin-left:0;
}
.second{
  margin-left:30px;
}
.third{
  margin-left:60px;
}

<div class="first">
  <h1>Hello</h1>
  <p>Some content here</p>
  <div class="second">
    <h2>Hello second</h2>
    <p>Also some content here</p>
    <div class="third">
      <h3>Hello third</h3>
      <p>Also some content here</p>
    </div>
    <p>Some further content in the second indentation</p>
  </div>
  <p>This is also some content in the first indentation</p>
</div>

Answer 2

为什么不直接使用列表<ul><li>...

ul, li { list-style: none; }

<ul>
  <li>
      <h1>hello h1</h1>
      <p>Lorem ipsum dolor sit amet</p>
      <ul>
        <li>
            <h2>hello h2</h2>
            <p>Lorem ipsum dolor sit amet</p>
            <ul>
              <li>
                  <h3>hello h3</h3>
                  <p>Lorem ipsum dolor sit amet</p>
              </li>
            </ul>
        </li>
      </ul>
  </li>
  <li>
      <h1>hello h1</h1>
      <p>Lorem ipsum dolor sit amet</p>
  </li>
</ul>

或者，如果您不想使用列表，则可以使用单个CSS规则和类来实现相同的目标，如下所示：

.cheating-list .cheating-list {
    margin-left: 40px;
}

<div class="cheating-list">
  <h1>hello h1</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <div class="cheating-list">
    <h2>hello h2</h2>
    <p>Lorem ipsum dolor sit amet</p>
      <div class="cheating-list">
        <h3>hello h3</h3>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
  </div>
</div>
<div class="cheating-list">
  <h1>hello h1</h1>
  <p>Lorem ipsum dolor sit amet</p>
</div>

诀窍是将包装<div class="cheating-list">添加到自身内部。

---

更新的代码

使用您的示例 HTML（这是很久以后添加的），这样的东西就可以了（但如果可能的话，我会将标记更改为上述示例之一）

h1,
h1 ~ *,
h2 ~ h1,
h2 ~ h1 ~ *,
h3 ~ h1,
h3 ~ h1 ~ * {
    margin-left: 0px;
}
h2,
h2 ~ *,
h1 ~ h2,
h1 ~ h2 ~ *:not(h1):not(h3) {
    margin-left: 40px;
}
h3,
h3 ~ *,
h1 ~ h3,
h1 ~ h3 ~ *:not(h1):not(h2) {
    margin-left: 80px;
}

<h1>heading 1</h1>
<p>content</p>
<h2>heading 2</h2>
<p>content</p>
<p>content</p>
<h3>heading 3</h3>
<p>content</p>
<img src="something.png" />
<p>content</p>
<h1>heading 1</h1>
<p>content</p>
<h1 class="entry-title">Inputs</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor, lacus eget egestas pharetra.</p>
<h2><span id="Columns">Columns</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor, lacus eget egestas pharetra.</p>
<ul>
  <li>fghgfdh</li>
  </ul>
<img src="http://via.placeholder.com/350x50" />
<h3><span id="another">another heading</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor, lacus eget egestas pharetra.</p>
<h1 class="entry-title">2nd Heading One</h1>
<p>This should not have a margin</p>
<h2><span id="Columns">Columns XXXX</span></h2>
<p>This margin is too large. It has the h3 margin applied to it</p>
<h3><span id="another">another h3 heading</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor, lacus eget egestas pharetra.</p>

Answer 3

不需要额外的课程。对于任何结构正确的HTML文档，遵循CSS就足够了：

  ul, ol {
    list-style-position: inside;
  } // This is necessary if you use lists. Otherwise just delete this rule.
  h1 ~ *:not(h1) {
    margin-left: 1.2rem;
  }
  h2 ~ *:not(h1, h2) {
    margin-left: 2.4rem;
  }
  h3 ~ *:not(h1, h2, h3) {
    margin-left: 3.6rem;
  }

Answer 4

而不是使用 margin ，我们可以通过使用无序列表轻松实现这种风格。

ul {
  list-style-type: none;
}
h1,h2,h3,h4,h5,h4 {
  margin: 0px;
}

<ul>
  <li>
    <h1>H1</h1>
    <p>Content here</p>
    
    <ul>
      <li>
        <h2>H2</h2>
        <p>Any content after the H2, paragraphs, images, etc</p>
         
         <ul>
          <li>
        <h3>H3</h3>
        <p>Any content after the H2, paragraphs, images, etcContent here</p>
           </li>
        </ul>
        
      </li>
      <li>
        <h2>H2</h2>
        <p>Any content after the H2, paragraphs, images, etc</p>
      </li>
      
    </ul>
    
  </li>
  
  <li>
    <h1>H1</h1>
    <p>Content here</p>
    
    <ul>
      <li>
        <h2>H2</h2>
        <p>Any content after the H2, paragraphs, images, etc</p>
         
         <ul>
          <li>
        <h3>H3</h3>
        <p>Any content after the H2, paragraphs, images, etcContent here</p>
           </li>
        </ul>
        
      </li>
      <li>
        <h2>H2</h2>
        <p>Any content after the H2, paragraphs, images, etc</p>
      </li>
      
    </ul>
    
  </li>
</ul> 

在这里，我附上了我的代码笔链接。