html - 隐藏 CSS 选择器规则的元素

Question

我正在尝试构建具有 Accordion 式功能的 HTML 页面。首先，我有这个简单的 CSS 选择器，声明“如果 H1 紧跟在另一个 H1 之后，则将背景设置为红色”。

<style type="text/css">
    h1 + h1 
    {
        background-color: red;
    }
</style>

然后是一些纯 HTML:

<h1>First</h1>
<p>Blah, blah...</p>
<h1>Second</h1>
<p>Blah, blah...</p>
<h1>Third</h1>
<p>Blah, blah...</p>

所有的 H1 看起来都应该如此，没有一个有红色背景，因为它们前面有一个 P 标签。

为此:

<h1>First</h1>
<h1>Second</h1>
<p>Blah, blah...</p>
<h1>Third</h1>
<p>Blah, blah...</p>

第二个 H1 有红色背景，因为它和前一个 H1 之间的 P 标签被删除了。非常好。

现在，我实际上想做的是以编程方式隐藏 H1 下方的“内容”，然后我希望看到红色规则生效。像这样:

<h1>First</h1>
<p>Blah, blah...</p>
<h1>Second</h1>
<p style="display: none">Blah, blah...</p>
<h1>Third</h1>
<p>Hello world...</p>

但由于 P 标签仍然存在，CSS 规则不适用于第三个 H1，并且没有红色背景。

问题:有没有一种方法可以使用 JavaScript 将某些内容应用于 P 标签，从而导致它们(暂时)被 CSS 规则忽略？

Answer 1

啊，我在写问题的时候突然想到了。因此，为了将来引用，这是我自己的解决方案:

为红色背景添加第二条规则，简单地说明“H1 after H1 OR H1 following any tag with a 'hidden' class set”:

h1 + h1, .hidden + h1
{
    background-color: red;
}

还有一个简单的隐藏类:

.hidden
{
    display: none;
}

然后我可以简单地向内容 P 标签添加一个“隐藏”类:

<h1>First</h1>
<p>Blah, blah...</p>
<h1>Second</h1>
<p class="hidden xxx">Blah, blah...</p>
<h1>Third</h1>
<p>Hello world...</p>

中提琴，第三个H1是红色的。 :) 并且我可以将我需要的任何其他类(“xxx”)应用于内容 P 标签。