CSS चयनकर्ताओं में '>' और एक स्पेस के बीच अंतर क्या है?

127

इस सिंटैक्स का उपयोग करने का क्या मतलब है

div.card > div.name

इसमें क्या अंतर है

div.card div.name

css css-selectors

— रैंडी मेयर
स्रोत

इस सवाल के आगे, जैसा कि मुझे इस बारे में पता नहीं था और मुझे एक समस्या का समाधान करने के लिए इस्तेमाल किया जा सकता है, जो ब्राउज़र इस प्रकार के चयनकर्ता का समर्थन करते हैं?

— काइल

3

यह सभी वर्तमान ब्राउज़रों में समर्थित है। IE को संस्करण 7 में समर्थन मिला: msdn.microsoft.com/en-us/library/…

— मत्ती वीरकुंकेन

212

A > B केवल B को चुनेंगे जो A के लिए सीधे बच्चे हैं (अर्थात, कोई अन्य तत्व inbetween नहीं हैं)।

A B किसी भी B को चुनेंगे जो A के अंदर हैं, भले ही उनके बीच अन्य तत्व हों।

— मत्ती विर्ककुनेन
स्रोत

11

>है बच्चे चयनकर्ता। यह केवल तात्कालिक बाल तत्वों को निर्दिष्ट करता है और किसी भी वंशज (पोते, पोते-पोतियों आदि को शामिल नहीं करता है) के बिना दूसरा उदाहरण है >।

चाइल्ड सिलेक्टर IE 6 और लोअर द्वारा समर्थित नहीं है। एक महान संगतता तालिका यहाँ है ।

— पेका
स्रोत

2

div.card > div.nameमेल खाता है, <div class='card'>....<div class='name'>xxx</div>...</div> लेकिन यह मेल नहीं खाता<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name दोनों से मेल खाता है।

यही है, >चयनकर्ता यह सुनिश्चित करता है कि दाईं ओर चयनित तत्व तत्व के बाईं ओर का >अपरिपक्व बच्चा है।

बिना >किसी भी मैच के वाक्य रचना <div class='name'>एक वंशज (केवल एक बच्चा नहीं है) <div class='card'>।

— रेने न्यफेनेगर
स्रोत

0

A> B, B का चयन करता है, यदि वह A का सीधा बच्चा है, जबकि AB B का चयन करता है, चाहे वह B के प्रत्यक्ष बच्चे हैं या नहीं।

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>

स्निपेट का विस्तार करें

— eozten
स्रोत

यहां एक कोड स्निपेट है। मुझे नहीं पता कि आप इसे देख सकते हैं।

— ईजीटेन

डेमो अच्छा है लेकिन वास्तव में जानकारी का सिर्फ सहायक है जो सवाल का जवाब देता है; जानकारी जो पहले से ही अन्य तीन उत्तरों में है। हो सकता है कि अगर आज यह सवाल पूछा गया था, तो यह उपयोगी होगा, लेकिन अगर आप एक> 8-वर्षीय प्रश्न का उपयोग करने जा रहे हैं, तो यह वास्तव में एक सम्मोहक कारण के लिए होना चाहिए।

— टायलरएच

0

> अंतरिक्ष बनाम

दो परिदृश्यों पर विचार करें div > span { }।div span { }

यहां, तत्व के <space>सभी <span>तत्वों का चयन करता है , <div>भले ही वे दूसरे तत्व के अंदर हों। <div>तत्व के सभी बच्चों का चयन करता है, लेकिन अगर वे किसी अन्य तत्व के अंदर हैं।

> (से अधिक):

div > span {
  color: #FFBA00 ;
}

<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>

स्निपेट का विस्तार करें

यह सिर्फ एक का चयन करता है <span>World!</span>और यह <span>अंदर के <p>टैग की तलाश नहीं करेगा ।

अंतरिक्ष

div span {
  color: #FFBA00 ;
}

<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
<body>

स्निपेट का विस्तार करें

यह सभी स्पैन टैग का चयन करता है, भले ही वे दूसरे टैग के अंदर हों।

— S.Goswami
स्रोत