Ẩn các phần tử cho các quy tắc chọn CSS

Question

Tôi đang cố tạo một trang HTML có chức năng kiểu accordion. Trước hết, tôi có bộ chọn CSS đơn giản này, cho biết "nếu H1 là ngay sau H1 khác, làm nền đỏ".

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

Sau đó, một số HTML đơn giản:

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

Tất cả các H1s trông giống như họ nên, không ai có một nền đỏ, bởi vì họ đang preceeded bởi một thẻ P.

Đối với điều này:

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

Các H1 thứ hai có nền đỏ, vì thẻ P giữa nó và H1 trước được lấy ra. Rất đẹp.

Bây giờ, những gì tôi thực muốn làm là để lập trình ẩn "nội dung" bên dưới H1s và sau đó tôi muốn thấy các đá màu đỏ-quy tắc trong Như thế này:.

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

Nhưng vì thẻ P vẫn ở đó, quy tắc CSS không áp dụng cho H1 thứ ba và không có nền màu đỏ.

Câu hỏi: Có cách nào để áp dụng điều gì đó bằng cách sử dụng JavaScript cho thẻ P sẽ khiến chúng (tạm thời) bị bỏ qua bởi quy tắc CSS không ??

Answer 1

Ah, nó đến với tôi khi tôi đang viết câu hỏi. Vì vậy, để tham khảo trong tương lai, đây là giải pháp của riêng tôi:

Thêm một quy tắc thứ hai cho nền đỏ, chỉ cần nêu rõ "H1 sau H1 HOẶC H1 sau bất kỳ thẻ với 'ẩn' lớp set":

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

Và một đơn giản trốn lớp:

.hidden 
{ 
    display: none; 
} 

Sau đó, tôi chỉ có thể thêm một lớp "ẩn" để các thẻ nội dung 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 thứ ba có màu đỏ. :) VÀ tôi có thể áp dụng bất kỳ lớp nào khác ("xxx") tôi cần đến các thẻ nội dung P.

Answer 2

này nên có tác dụng nếu bạn đang đi để ẩn nội dung sử dụng phong cách nội tuyến:

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

Kiểm tra bản demo: http://jsfiddle.net/qFyUc/