"div> p" और "div p" समान हैं?

Question

अरे, मेरे पास एक स्पष्ट सवाल है।

की तरह कोड के लिए:

div > p { 
    something 
} 

और दूसरों:

div p { 
    something 
} 

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

<div> 
    <p>We want to format this text :)</p> 
</div> 

कुछ लोगों की तरह का भी उपयोग कर? मेरी राय में - कोई नहीं?

और वैसे, वंशज हमेशा एक बच्चा नहीं है ?! दोनों के बीच क्या अंतर है? मैं w3.org पढ़ रहा हूं लेकिन इसे प्राप्त नहीं कर सकता :)

धन्यवाद!

Answer 1

सरल:

div > p 

केवल प्रत्यक्ष बच्चों को प्रभावित करता।

div p 

रूप में अच्छी तरह प्रभावित करता पोते, grandgrandchildren आदि । (आपके उदाहरण में कोई फर्क नहीं पड़ता)

बच्चे चयनकर्ता isn't supported by IE6।

Answer 2

पेक्का ने इसे his answer में सिद्धांत में समझाया है। उनके उत्तर के आधार पर, और my answer to another question about the > combinator, मैं इस प्रश्न को हल करने के लिए संशोधित एक उदाहरण प्रदान करूंगा।

एचटीएमएल के निम्नलिखित ब्लॉक पर विचार करें, और आपका उदाहरण सीएसएस चयनकर्ता। मैं एक अधिक विस्तृत उदाहरण उपयोग करती हैं इसलिए मैं आपको अपने चयनकर्ताओं के दोनों के बीच का अंतर दिखा सकते हैं:

<div> 
    <p>The first paragraph.</p>     <!-- [1] --> 
    <blockquote> 
     <p>A quotation.</p>      <!-- [2] --> 
    </blockquote> 
    <div> 
     <p>A paragraph after the quotation.</p> <!-- [3] --> 
    </div> 
</div> 

कौन सा <p> रों जो चयनकर्ताओं द्वारा चुने जाते हैं?

पहले, सभी उनमें से मेल खाते हैं div p क्योंकि वे <p>स्थित तत्वों एक <div> तत्व के भीतर कहीं भी कर रहे हैं।

कि div > p से खास बना है, जो अगले प्रश्न भीख माँगता:

कौन सा <p> रों div > p द्वारा चुने जाते हैं?

1. चयनित

   इस पैरा <p> एक बच्चे, या एक प्रत्यक्ष वंशज, सबसे बाहरी <div> की है। इसका मतलब है कि यह <div> की तुलना में किसी भी अन्य तत्व द्वारा तत्काल निहित नहीं है। पदानुक्रम चयनकर्ता के रूप में सरल है, और इस तरह इसे div > p द्वारा चुना गया है।

2. चयनित नहीं

   यह <p> एक <blockquote> तत्व में पाया जाता है, और <blockquote> तत्व सबसे बाहरी <div> में पाया जाता है। पदानुक्रम इस प्रकार इस प्रकार दिखाई देगा:

   div > blockquote > p 
   

   के रूप में पैरा सीधे एक ब्लॉककोट के अंतर्गत होता है, यह div > p द्वारा चयनित नहीं। हालांकि, यह मैच blockquote > p (दूसरे शब्दों में, यह <blockquote> का बच्चा है)।

3. भीतरी <div> है, जो बाहरी <div> के अंतर्गत होता है में

   इस पैरा जीवन चयनित। पदानुक्रम इस प्रकार दिखाई देगा:

   div > div > p 
   

   अगर देखते हैं और अधिक <div> एक दूसरे के भीतर नेस्ट रों इससे कोई फर्क नहीं है, या <div> रों अन्य तत्वों द्वारा निहित हैं, भले ही। जब तक यह अनुच्छेद सीधे अपने <div> द्वारा निहित है, तो इसे div > p द्वारा चुना जाएगा।