html - 隐藏 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 规则忽略？

score 3 · Accepted Answer

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

为红色背景添加第二条规则，简单地说明“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 标签。

score 2 · Accepted Answer

如果您要使用内联样式隐藏内容，这应该可以工作：

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

2 回答 2