隐藏CSS选择器规则的元素

Question

我正在尝试使用手风琴式功能构建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 在 H1 之后或 H1 在具有‘隐藏’类集的任何标记之后”：

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 标签。