按不同的量缩进标题下的所有元素- CSS

Question

我正在尝试根据标题标签缩进元素。我目前是通过使用兄弟选择器来做到这一点的:

p{
padding-left: 0;
}
h1 + p, h1 + ul{
padding-left: 1em;
}
h2 + p{
padding-left: 2em;
}

但是，如果标题下有两个或两个以上段落，则默认为零。

是否有办法将h1标签下的所有元素的填充设置为相同的值，并将h1标签下的所有元素设置为不同的值(仅使用CSS)?

谢谢你的帮助!

Answer 1

你可以这样做:

h1+div {
padding-left: 1rem;
}
h2+div {
padding-left: 2rem;
}

<h1>My Title</h1>
<div>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
</div>
<h2>My Title</h2>
<div>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
</div>

也有一种方法可以只使用CSS实现相同的效果，但我不特别推荐它:

h1 ~ p, h1 ~ ul {
padding-left: 1rem;
}
h2 ~ p, h2 ~ ul {
padding-left: 2rem;
}

<h1>My title</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<h2>My title</h2>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>