अगले तत्व के लिए CSS में चयनकर्ता के लिए वाक्यविन्यास क्या है?

Question

अगर मेरे पास हैडर टैग है <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

और उसके बाद मेरे पास एक पैराग्राफ है <p>stuff here</p>।

मैं सीएसएस का उपयोग कैसे सुनिश्चित कर सकता हूं कि प्रत्येक <p>टैग जो h1.hc-reformउपयोग करने के लिए निम्न है :clear:both;

हो सकता है कि:

h1.hc-reform > p{
     clear:both;
}

किसी कारण से यह काम नहीं कर रहा है।

Answer 1

इसे आसन्न सिबलिंग चयनकर्ता कहा जाता है , और इसे एक प्लस चिह्न द्वारा दर्शाया जाता है ...

h1.hc-reform + p {
  clear:both;
}

नोट: यह IE6 या पुराने में समर्थित नहीं है।

Comments

वह pकेवल उसके बाद आने वाले का चयन करेगा h1.hc-reform। फिर से यह केवल एक ही हो सकता है कि clear: bothइसके लिए काम करने की आवश्यकता है क्योंकि यह केवल h1फ्लोट को साफ करता है , इसलिए यह अभी भी एक वैध उत्तर है।

— बोल्टकॉक

@BoltClock हाँ आप सही हैं, मैंने कल्पना को गलत पढ़ा और उस टिप्पणी को हटा दिया क्योंकि यह गलत था। यह चयनकर्ता केवल उसी से मेल खाएगा जो pपहले h1.hc-reform(समान मूल तत्व के साथ, निश्चित रूप से) से पहले हो।

— जोश स्टोडोला

वाह आसन्न भाई चयनकर्ता के बारे में पता नहीं था। अच्छा धन्यवाद!

— सिद्धांत

~ इस मामले में एक बेहतर चयनकर्ता है। यहाँ एक काम JSfiddle jsfiddle.net/dZAtt

— ProblemsOfSumit

ध्यान देने योग्य बात यह है कि यह काम नहीं करता है यदि पहले तत्व में कोई बच्चा है

— 72GM

Answer 2

आप सिबलिंग चयनकर्ता का उपयोग कर सकते हैं ~:

h1.hc-reform ~ p{
     clear:both;
}

यह उन सभी pतत्वों का चयन करता है जो बाद में आते हैं .hc-reform, न कि पहले वाले।

Comments

पहले लिंक में IE बग्स अस्पष्ट केस केस सामान हैं, शायद यही वजह है कि quirksmode उन्हें अनदेखा करता है।

— अक्ष।

Answer 3

कोई >भी बच्चा चयनकर्ता नहीं है।

जो आप चाहते हैं +

इसलिए कोशिश करें h1.hc-reform + p

ब्राउज़र समर्थन महान नहीं है

Comments

2020: दस वर्षों के बाद ब्राउज़र समर्थन महान है। बस सीएसएस novices के लिए एक जानकारी।

— एलेक्सियोवे

Answer 4

>एक है बच्चे चयनकर्ता । तो अगर आपका HTML ऐसा दिखता है:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... तो वह आपका टिकट है।

लेकिन अगर आपका HTML ऐसा दिखता है:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

फिर आप आसन्न चयनकर्ता चाहते हैं :

h1.hc-reform + p{
     clear:both;
}

Comments

मुझे यकीन है कि वह h1 के अंदर घोंसले के पी का घोंसला नहीं था .. इसके अलावा, आसन्न केवल पहले पी का चयन करता है।

— स्टीफन मुलर

Answer 5

बिल्कुल नहीं। इसका h1.hc-reform > pमतलब है "किसी भी pएक बिल्कुल नीचे स्तर h1.hc-reform"।

तुम जो चाहते हो h1.hc-reform + p। बेशक, इंटरनेट एक्सप्लोरर के पुराने संस्करणों में कुछ समस्याएं हो सकती हैं; यदि आप पुराने IE के साथ पृष्ठ को सुसंगत बनाना चाहते हैं, तो आप पैराग्राफ में मैन्युअल रूप से एक वर्ग जोड़ने या जावास्क्रिप्ट (jQuery में, उदाहरण के लिए, आप कुछ ऐसा कर सकते हैं $('h1.hc-reform').next('p').addClass('first-paragraph')) का उपयोग करके अटक जाएंगे ।

अधिक जानकारी: http://www.w3.org/TR/CSS2/selector.html या http://css-tricks.com/child-and-sibling-selectors/