CSS General Sibling Selector vs Header

Question

这是关于使用General Sibling Selector设置标题的基本但棘手的问题。许多人在使用它时会犯错（并写书！）。对我来说似乎毫无用处：

<h1>Title 1</h1>
<p>text</p><p>text</p>
<h2>Title 1.1</h2>
<p>text</p><p>text</p>
<h3>Title 1.1.1</h3>
<p>text</p><p>text</p>
<h2>Title 1.2</h2>
<p>text</p><p>text</p>
<h3>Title 1.2.1</h3>
<p>text</p><p>text</p>

我想把我的所有P打造成一个边距：

H1 ~ P { margin-left: 1em; }
H2 ~ P { margin-left: 2em; }
H3 ~ P { margin-left: 3em; }

它根本无法工作！

因为1.2节的P在H3之后并且由H3定型而不是H2。

• 我不能使用H2 + P，因为我可以有很多P。
• 我不想在P周围使用<div>过于肮脏。
• 如果我没有在此代码上添加一个包装器，则会选择此代码后页面中的所有P！

有没有办法确定Tilde的范围？或者巧妙地处理这个问题？

Answer 1

尝试以相反的方式转换css（最后一个定义获胜，所以我认为这有效（但我没有测试过））

新CSS：

h3 ~ p { margin-left: 3em; }
h2 ~ p { margin-left: 2em; }
h1 ~ p { margin-left: 1em; }