Селектор общего брака CSS и заголовок

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; }

Это просто не может работать!

Поскольку P в разделе 1.2 следуют за H3 и имеют стиль H3 вместо H2.

• Я не могу использовать H2 + P, потому что у меня может быть много P.
• Я не хочу использовать <div> вокруг P, это слишком грязно.
• если я не наложу обертку на этот код, все P на странице после того, как будет выбран этот код!

Есть ли способ охватить тильду?Или решить эту проблему с умом?

Answer 1

Попробуйте перевернуть CSS наоборот (последнее определение выигрывает, поэтому я думаю, что это работает (но я не проверял))

новый CSS:

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