问题描述
我需要在标题后缩进所有元素,以提供直观的结构化布局.
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 :
但是,回到关卡后,我无法重置".
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-标题后兄弟姐妹的连续缩进的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!