CSS-标题后兄弟姐妹的连续缩进 [英] CSS - successive indenting of siblings after headings

问题描述

我需要在标题后缩进所有元素，以提供直观的结构化布局.

I am needing to indent all elements after headings to give a visual structured layout.

我已经看到，在这个问题中这是可能的:

I have seen that this is possible in the this question :

缩进h2之后的所有标签直到使用CSS击中下一个h2

但是，回到关卡后，我无法重置".

However, I am unable to "reset" when going back a level.

更清楚地说，我需要有渐进式的缩进，当移回时该渐进式会取消.

To be more clear, I need to have progressive indents which cancel when moving back.

所以

H1
    H2
    .....
    H2
    .....
        H3
        ....
    H2
    .....
H1
....

如果可能的话，我宁愿不使用封闭的DIV而是纯CSS.

If possible, I would prefer to not use enclosing DIV's but rather pure CSS.

这可能吗?

推荐答案

此处是用于缩进的代码段.希望我能正确理解您的要求.

Here is a code snippet for indenting. I hope I understand what you want correctly.

* {
  margin: 0;
}
h1 ~ *:not(h1) {
  margin-left: 1em;
}
h2 ~ *:not(h1):not(h2) {
  margin-left: 2em;
}
h3 ~ *:not(h1):not(h2):not(.h2):not(h3) {
  margin-left: 3em;
}
h4 ~ *:not(h1):not(h2):not(.h2):not(h3):not(.h3):not(h4) {
  margin-left: 4em;
}

<h1>H1</h1>
<h2>H2</h2>
<h2>H2</h2>
<p class="h2">test</p>
<h3>H3</h3>
<p class="h3">test</p>
<h4>H4</h4>
<p class="h4">test</p>
<h2>H2</h2>
<p class="h2">test</p>
<h1>H1</h1>
<h2>H2</h2>
<h2>H2</h2>
<h1>H1</h1>

UPD:

哦，我看到其他内容了-很抱歉，没有收到.也许这样吗?

Oh, I see about other elements - sorry didn't get it. Maybe somehow like this?

这篇关于CSS-标题后兄弟姐妹的连续缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！