Elemente für CSS-Selektorregeln ausblenden

Question

Ich versuche, eine HTML-Seite mit Funktionen im Akkordeon-Stil zu erstellen. Zunächst einmal, ich habe diese einfache CSS-Selektor, mit der Aussage "Wenn der H1 ist gleich nach einem anderen H1, machen Sie den Hintergrund rot".

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

Dann einige einfache HTML:

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

Alle H1s aussehen sollten sie keine haben einen roten Hintergrund, weil sie von einem P-Tag vorangestellt sind.

hierzu:

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

Der zweite H1 hat einen roten Hintergrund, weil der P-Tag zwischen dem vorherigen und es H1 wird entfernt. Sehr schön.

Nun, was ich eigentlich will, ist programmatisch den „Inhalt“ unter dem H1s verstecken und dann würde Ich mag in dem roten Regel Kick sehen wie folgt aus:.

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

Aber Da das P-Tag immer noch da ist, gilt die CSS-Regel nicht für das dritte H1, und es gibt keinen roten Hintergrund.

Frage: Gibt es eine Möglichkeit, etwas mit JavaScript auf die P-Tags anzuwenden, die dazu führen, dass sie (vorübergehend) von der CSS-Regel ignoriert werden ??

Answer 1

Ah, es kam zu mir, als ich die Frage schrieb. Also, für die Zukunft, hier ist meine eigene Lösung:

eine zweite Regel für den roten Hintergrund, einfach unter Angabe „H1 nach H1 oder H1 nach jedem Tag mit einem‚versteckten‘Klassensatz“:

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

Und ein einfaches Versteck Klasse:

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

:

.hidden 
{ 
    display: none; 
} 

Dann kann ich eine "versteckte" Klasse den Inhalt P-Tags einfach hinzufügen

Viola, die dritte H1 ist rot. :) UND ich kann alle anderen Klassen (die "xxx"), die ich brauche, auf die P-Tags des Inhalts anwenden.

Answer 2

Dies sollte funktionieren, wenn Sie den Inhalt mit Inline-Styles gehen zu verstecken:

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

prüfen Demo: http://jsfiddle.net/qFyUc/