css - 有没有办法将兄弟姐妹分组

Question

我问的原因是，我想在一个普通的 Markdown 渲染文档中创建可以用 CSS 显示和隐藏的部分。渲染的输出可能是这样的：

<h2>Hello</h2>

<p>content</p>
<p>more content</p>
<h2>Hello</h2>

<p>content not in a section</p>
<p>and neither is this</p>

<h2>World</h2>

<p>even more content</p>
<p>...whatever</p>

<h3>Title</h3>
<p>some stuff</p>

<h2>World</h2>

<p>...another paragraph</p>

<h2>Again</h2>
<p>more stuff</p>
<p>...and more</p>
<h2>Again</h2>

而且我希望能够隐藏/显示第 1 节标签之间的所有内容，包括第 1 节<h2>标签。

我在想一些事情：

h2 ~ p {
    ...
}

但这显然不会停留在下一个 h2 标签上。我意识到这可能是不可能的，但我想我会问以防万一我错过了什么。

编辑只是为了澄清，可能有很多h2元素，还有其他h?元素，例如h3

编辑我已经设法使用以下 CSS

h2:nth-of-type(2n+1) {
    color: blue;
}
h2:nth-of-type(2n) {
    color: red;
}

h2:nth-of-type(1) ~ *:not(h2) {
    color: purple;
}
h2:nth-of-type(2) ~ *:not(h2) {
    color: black;
}

h2:nth-of-type(3) ~ *:not(h2) {
    color: purple;
}
h2:nth-of-type(4) ~ *:not(h2) {
    color: black;
}

h2:nth-of-type(5) ~ *:not(h2) {
    color: purple;
}
h2:nth-of-type(6) ~ *:not(h2) {
    color: black;
}

h2:nth-of-type(7) ~ *:not(h2) {
    color: purple;
}
h2:nth-of-type(8) ~ *:not(h2) {
    color: black;
}

h3 {
    color: black;
}

它很笨拙，但是我试图用降价 HTML 做的事情是相当笨拙的。颜色是显示/隐藏内容的代表，只是表明我可以定位它们。见jsFiddle

score 3 · Accepted Answer

假设您可以将整个生成的 HTML 封装到单个元素中（例如body，甚至是div）：

<body>

<h2>Hello</h2>
<p>content</p>
<p>more content</p>

<h2>World</h2>
<p>even more content</p>
<p>...whatever</p>

</body>

在您的 CSS 中，您可以h2使用以下方法定位元素:nth-of-type()：

h2:nth-of-type(1) {
    color: red;
}
h2:nth-of-type(2) {
    color: blue;
}
h2:nth-of-type(1) ~ p {
    color: purple;
}
h2:nth-of-type(2) ~ p {
    color: orange;
}

请参阅jsFiddle。请意识到这是一个相当丑陋的解决方案，不确定它是否在所有支持的浏览器中都能正常工作nth-of-type，并且它依赖于源顺序。