Question

我需要在标题后缩进所有元素以提供视觉结构化布局。

我已经看到这个问题可以解决这个问题：

Indent all tags following h2 until next h2 is hit using CSS

然而，我无法重置＆＃34;当回到一个水平时。

为了更清楚，我需要进行渐进式缩进，在移回时会取消。

所以

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

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

这可能吗？

Answer 1

以下是缩进的代码段。我希望我理解你想要的正确。

* {
  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：

哦，我看到其他元素 - 抱歉没有得到它。也许是这样的？

Answer 2

您可以使用CSS text-indent属性。

h2, h2 + * {
    text-indent: 50px;
}
h3, h3 + * {
    text-indent: 100px;
}

Answer 3

好的，这是适用于我的解决方案：

h1 + *:not(h1)
{
    margin-left: 0em;
}

h2 + *:not(h2), h2
{
    margin-left: 20px;
}

h3 + *:not(h3), h3
{
    margin-left: 40px;
}

关键是使用加号（+）而不是波浪号（〜）。希望这也有助于其他人。

编辑：好的，说得太早了。这将成功缩进和突出，但仅适用于第一个兄弟元素。如果有多个兄弟元素，它将失败。有什么想法吗？

CSS - 标题后连续缩进兄弟姐妹

3 个答案: