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標籤preceeded。

對於此：

<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標籤。

Answer 2

如果你要使用內嵌樣式隱藏內容這應該工作：

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

檢查演示：http://jsfiddle.net/qFyUc/