सीएसएस बाल बनाम वंशज चयनकर्ता

Question

मैं इन 2 चयनकर्ताओं के बीच थोड़ा भ्रमित हूं।

क्या वंशज चयनकर्ता:

div p

सभी का चयन pएक के भीतर divकिया जाए या नहीं यह एक तत्काल descedent है? तो अगर pदूसरे के अंदर है तो divभी इसे चुना जाएगा?

फिर बच्चे का चयनकर्ता:

div > p

क्या फर्क पड़ता है? क्या एक बच्चे का मतलब तत्काल बच्चा है? उदाहरण के लिए।

<div><p>

बनाम

<div><div><p>

दोनों का चयन किया जाएगा, या नहीं?

Comments

मैंने यहाँ विस्तार से समझाने की कोशिश की है , अगर किसी को इसका मददगार माना जाता है, तो बस इंसेक्ट कर सकता हूँ ...

— श्री एलियन

Answer 1

ज़रा सोचिए कि "बच्चे" और "वंशज" शब्द का अंग्रेजी में क्या मतलब है:

• मेरी बेटी मेरा बच्चा और मेरा वंशज है
• मेरी पोती मेरी संतान नहीं है, लेकिन वह मेरी संतान है।

Comments

एक महत्वपूर्ण नोट यह है कि एक बच्चा चयनकर्ता वंशज चयनकर्ता की तुलना में अधिक तेज़ होने वाला है, जो 1000 के डोम तत्वों के साथ पृष्ठों पर एक दृश्य प्रभाव डाल सकता है।

— जेक विल्सन

अच्छा जवाब, लेकिन मैं सीधे सवाल में उसके उदाहरणों के सीधे जवाबों पर जोड़ूंगा - बस इसे हास्यास्पद रूप से स्पष्ट करने के लिए।

— जोकूल

Answer 2

हाँ आप सही हैं। div pनिम्नलिखित उदाहरण से मेल खाएगा, लेकिन div > pनहीं होगा।

<div><table><tr><td><p> <!...

पहले वाले को वंशज चयनकर्ता कहा जाता है और दूसरे को बाल चयनकर्ता कहा जाता है ।

Answer 3

Bascailly, " अब " चयन सब ख की एक अंदर है, जबकि " एक> ख " चयन के ख क्या केवल करने के लिए बच्चे हैं एक , उसका चयन नहीं होगा ख क्या की संतान है ख का बच्चा है क्या एक ।

यह उदाहरण अंतर दिखाता है:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

एबीसी और डीईएफ की पृष्ठभूमि का रंग हरा होगा, लेकिन घी में लाल पृष्ठभूमि का रंग होगा।

महत्वपूर्ण: यदि आप नियमों का क्रम बदलते हैं:

div>span{background:green}
div span{background:red}

सभी पत्रों में लाल पृष्ठभूमि होगी, क्योंकि वंशज चयनकर्ता बच्चे का भी चयन करता है।

Comments

आपके द्वारा जोड़ा गया "महत्वपूर्ण" खंड इस उत्तर को पूर्ण बनाता है। धन्यवाद!

— आकाश वर्मा

Answer 4

सिद्धांत में: बच्चा => पूर्वज का तत्काल वंशज (जैसे जो और उसके पिता)

उतर => कोई भी तत्व जो किसी विशेष पूर्वज (जैसे जो और उसके परदादा-पिता) से उतरा है

व्यवहार में: इस HTML का प्रयास करें:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

इस सीएसएस के साथ:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

Comments

दिलचस्प है कि आपने इसे किस ब्राउज़र पर परीक्षण किया, क्योंकि यह वास्तव में काम करता दिखाई देता है

— योएल हलब

FYI करें, जवाब में CSS JSFiddle ( redऔर blueअदला - बदली) में सीएसएस के साथ मेल नहीं खाता है ।

— पांग

Answer 5

ज्ञात रहे कि इंटरनेट एक्सप्लोरर 6 में बच्चे का चयनकर्ता समर्थित नहीं है (यदि आप चयनकर्ता का उपयोग एक jQuery / प्रोटोटाइप / YUI आदि चयनकर्ता की स्टाइल शीट में करने के बजाय करते हैं तो यह अभी भी काम करता है)

Comments

मैं सोच रहा हूँ कि मैं सीएसएस में उपयोग करता हूं। लेकिन jquery में मैं पता लगाता हूं कि क्या ब्राउज़र ie6 है (jquery में मैं यह कर सकता हूं? या क्या मुझे उपयोग करने की आवश्यकता है? - [[अगर IE 6]>) और एक वर्ग जोड़ें

— iceangel89

jquery में ब्राउज़र को सूँघने की बजाय सूँघने की सुविधा होती है इसलिए मुझे नहीं लगता कि आप पता लगा सकते हैं कि ब्राउज़र 6 है। और आपको नहीं करना चाहिए। सबसे अच्छी बात यह है कि आपके द्वारा वर्णित सशर्त टिप्पणियों के साथ ie6 के लिए एक अतिरिक्त शैली पत्रक शामिल करना है।

— १:05:०५ पर ६

Answer 6

div p 

उन सभी 'पी' तत्वों का चयन करता है, जहाँ अभिभावक एक 'div' तत्व है

div> पी

इसका अर्थ है कि तत्काल बच्चे सभी 'पी' तत्वों का चयन करते हैं जहां अभिभावक एक 'div' तत्व है

Answer 7

एक विशेष तत्व के लिए सीएसएस चयन और आवेदन शैली को डोम तत्व [उदाहरण के माध्यम से ट्रैवर्सिंग के माध्यम से किया जा सकता है

उदाहरण

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>