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>

Viola，第三个H1是红色的。 :)我可以将任何其他类（“xxx”）应用于内容P标签。

Answer 2

如果您要使用内联样式隐藏内容，这应该有效：

h1 + h1, p[style*="display: none"] + h1 {
    background-color: red;
}