我想尝试缩进样式，如下所示
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
示例html
<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，因为我将此应用于已经创建了许多页面的网站。
答案 0 :(得分：3)
我会这样做：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>
答案 1 :(得分：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>
答案 2 :(得分：0)
我们可以使用无序列表轻松实现此类型，而不是使用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>