उदाहरण के लिए:
p + p {
/* Some declarations */
}मुझे नहीं पता कि क्या +मतलब है। इसके और केवल pबिना किसी शैली को परिभाषित करने के बीच क्या अंतर है + p?
जवाबों:
W3.org पर आसन्न चयनकर्ताओं को देखें ।
इस मामले में, चयनकर्ता का मतलब है कि शैली केवल दूसरे अनुच्छेद के बाद सीधे पैराग्राफ पर लागू होती है।
एक सादे pचयनकर्ता पृष्ठ के हर पैराग्राफ पर शैली लागू करेगा।
यह केवल IE7 या इसके बाद के संस्करण पर काम करेगा। IE6 में, शैली को किसी भी तत्व पर लागू नहीं किया जाएगा। यह कंबाइनेटर के लिए भी जाता >है, वैसे।
इंटरनेट एक्सप्लोरर में सीएसएस संगतता के लिए माइक्रोसॉफ्ट का अवलोकन भी देखें ।
visibility : hidden/visibleइसके बजाय का उपयोग करके है display : none/block। इस संदर्भ को देखें ।
p > pमतलब एक नेस्टेड p, ईई pहै जो सीधे दूसरे से नीचे है p, जैसे कि <p><p>This paragraph</p></p>।
यह आसन्न भाई चयनकर्ता है।
CSS आसन्न चयनकर्ता को परिभाषित करने के लिए, प्लस चिह्न का उपयोग किया जाता है।
h1+p {color:blue;}उपरोक्त सीएसएस कोड नीले रंग के रूप में किसी भी h1 शीर्षकों के बाद (अंदर नहीं) पहले पैराग्राफ को प्रारूपित करेगा।
h1>pकिसी भी pतत्व का चयन करता है जो एक तत्व का प्रत्यक्ष (पहली पीढ़ी) बच्चा (अंदर) है h1।
h1>pमैच <h1> <p></p> </h1>( <p>अंदर <h1>)h1+pपहले pतत्व का चयन करेंगे जो एक h1तत्व के रूप में एक भाई (डोम के समान स्तर पर) है ।
h1+pमैच <h1></h1> <p><p/>( <p>अगले / बाद के <h1>)plus signऔर greater sign। अगर मैं h1>pइसके बजाय उपयोग h1+pकरता हूं , तो क्या यह मुझे वही परिणाम देता है? क्या आप थोड़ा समझा सकते हैं कि उनके बीच कितना अंतर था?
h1>pकिसी भी pतत्व का चयन करता है जो किसी तत्व का प्रत्यक्ष (पहली पीढ़ी) बच्चा है h1। h1+pपहले pतत्व का चयन करेंगे जो एक h1तत्व के रूप में एक भाई (डोम के समान स्तर पर) है । h1>pमैच <h1><p><p></h1>, h1+pमैच<h1></h1><p><p/>
+संकेत का मतलब है एक "आसन्न भाई" का चयन करें
उदाहरण के लिए, यह शैली दूसरे से लागू होगी <p>:
p + p {
font-weight: bold;
} <div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>इसे देखें JSFiddle और आप इसे समझेंगे: http://jsfiddle.net/7c05m7tv/ (अन्य JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )
सभी आधुनिक ब्राउज़रों में आसन्न सिबलिंग चयनकर्ताओं का समर्थन किया जाता है।
"+" आसन्न सहोदर चयनकर्ता है। यह किसी भी पी का चयन करेगा एपी एपी (न कि एक बच्चा या माता-पिता हालांकि, एक भाई)।
+चयनकर्ता कहा जाता है Adjacent Sibling Selector।
उदाहरण के लिए, चयनकर्ता p + p, का चयन करता है pतत्वों के तुरंत बाद pतत्वों
इसे एक looking outsideचयनकर्ता के रूप में सोचा जा सकता है जो तुरंत निम्नलिखित तत्व की जांच करता है।
यहाँ चीजों को और अधिक स्पष्ट करने के लिए एक नमूना स्निपेट दिया गया है:
body {
font-family: Tahoma;
font-size: 12px;
}
p + p {
margin-left: 10px;
}<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>चूंकि हम एक ही विषय हैं, यह एक और चयनकर्ता, ~चयनकर्ता का उल्लेख करने योग्य है , जो हैGeneral Sibling Selector
उदाहरण के लिए, p ~ pसभी का चयन करता है pजो इस pबात से कोई फर्क नहीं पड़ता कि यह कहां है, लेकिन दोनों pको एक ही माता-पिता होने चाहिए।
यहाँ एक ही मार्कअप के साथ कैसा दिखता है:
body {
font-family: Tahoma;
font-size: 12px;
}
p ~ p {
margin-left: 10px;
}<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>ध्यान दें कि अंतिम pभी इस नमूने में मेल खाता है।
यह किसी भी तत्व से मेल खाता pहै जो तत्त्व 'p' के निकट है। देखें: http://www.w3.org/TR/CSS2/selector.html
+रिश्तेदार चयनकर्ताओं में से एक को प्रस्तुत करता है। सभी रिश्तेदार चयनकर्ताओं की सूची:
div p- <p>तत्वों के अंदर सभी तत्वों <div>का चयन किया जाता है।
div > p- वे सभी <p>तत्व जिनके प्रत्यक्ष अभिभावक <div>चुने गए हैं। यह पिछड़े भी काम करता है ( p < div)
div + p- <p>तत्वों के <div>चयन के तुरंत बाद सभी तत्व जगह देते हैं।
div ~ p- <p>एक <div>तत्व से पहले होने वाले सभी तत्वों को चुना जाता है।
p+p{
//styling the code
}
p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.
<div>
<input type="text" placeholder="something">
<p>This is first paragraph</p>
<button>Button </button>
<p> This is second paragraph</p>
<p>This is third paragraph</p>
</div>
Styling part
<style type="text/css">
p+p{
color: red;
font-weight: bolder;
}
</style>
It will style all sibling paragraph with red color.अंतिम उत्पादन इस तरह दिखते हैं
प्लस (+) पहले तात्कालिक तत्व का चयन करेगा। जब आप + चयनकर्ता का उपयोग करते हैं तो आपको दो पैरामीटर देने होंगे। यह उदाहरण से अधिक स्पष्ट होगा: यहां div और स्पैन पैरामीटर हैं, इसलिए इस मामले में डिव के बाद केवल पहली स्पैन को स्टाइल किया जाएगा।
div+ span{
color: green;
padding :100px;
}
<div>The top or first element </div>
<span >this is span immediately after div, this will be selected</span>
<span>This will not be selected</span>उपरोक्त शैली केवल डिव के बाद पहले स्पैन पर लागू होगी। यह ध्यान रखना महत्वपूर्ण है कि दूसरे स्पैन का चयन नहीं किया जाएगा।
इसका मतलब है कि यह हर उस pतत्व से मेल खाता है जो तुरंत आसन्न है
www.snoopcode.com/css/examples/css-adjacent-sibling-selector