सीएसएस चयनकर्ता नियमों के लिए तत्व छुपाएं

Question

मैं एग्रीजन-शैली कार्यक्षमता के साथ एक HTML पृष्ठ बनाने की कोशिश कर रहा हूं। सबसे पहले, मेरे पास यह सरल सीएसएस चयनकर्ता है, जिसमें कहा गया है कि "यदि 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> 

सभी H1S जैसे वे चाहिए देखो, कोई भी एक लाल रंग की पृष्ठभूमि है, क्योंकि वे एक पी टैग द्वारा preceeded रहे हैं।

इस के लिए:

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

दूसरा एच 1 एक लाल रंग की पृष्ठभूमि है, क्योंकि यह और पिछले एच 1 के बीच पी टैग हटा दिया है। बहुत अच्छा।

अब, क्या मैं वास्तव में क्या करना चाहते हैं प्रोग्राम के रूप में "सामग्री" H1S नीचे छिपाने के लिए और फिर मैं में लाल नियम लात देखना चाहेंगे है इस तरह:।

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

लेकिन चूंकि पी टैग अभी भी वहां है, सीएसएस नियम तीसरे एच 1 के लिए लागू नहीं होता है, और कोई लाल पृष्ठभूमि नहीं है।

प्रश्न: क्या पी टैग्स में जावास्क्रिप्ट का उपयोग करके कुछ लागू करने का कोई तरीका है जो उन्हें (अस्थायी रूप से) सीएसएस नियम द्वारा अनदेखा कर देगा ??

Answer 1

आह, यह मेरे पास आया क्योंकि मैं सवाल लिख रहा था। तो, भविष्य में संदर्भ के लिए, यहाँ अपने ही समाधान है:

लाल रंग की पृष्ठभूमि के लिए एक दूसरे नियम जोड़ें, केवल यह कहना "एच 1 के बाद एच 1 या एच 1 एक 'छुपा' वर्ग सेट के साथ किसी भी टैग निम्नलिखित":

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

और एक सरल छिपाने श्रेणी:

.hidden 
{ 
    display: none; 
} 

तो मैं सामान्य रूप से सामग्री पी टैग करने के लिए एक "छिपा" वर्ग जोड़ सकते हैं:

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

विओला, तीसरा एच 1 लाल है। :) और मैं किसी भी अन्य वर्ग ("xxx") को लागू कर सकता हूं, मुझे सामग्री पी टैग की आवश्यकता है।

Answer 2

अगर आप इनलाइन शैलियों का उपयोग कर सामग्री को छिपाने के लिए जा रहे हैं काम करना चाहिए:

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

चेक डेमो: http://jsfiddle.net/qFyUc/