एक सीएसएस चयनकर्ता में अंतरिक्ष का मतलब क्या है? यानी .classA.classB और .classA .classB के बीच क्या अंतर है?

Question

इन दो चयनकर्ताओं के बीच क्या अंतर है?

.classA.classB { 
    border: 1px solid; 
} 

.classA .classB { 
    border: 1px solid; 
} 

Answer 1

.classA.classB एक तत्व दोनों वर्गों ए और बी (class="classA classB") है को संदर्भित करता है; जबकि .classA .classBclass="classB" के साथ class="classA" वाले तत्व से निकले तत्व के साथ संदर्भित करता है।

संपादित करें: संदर्भ के लिए युक्ति: Attribute Selectors (खंड 5.8.3 कक्षा चयनकर्ता देखें)

Answer 2

इस तरह एक शैली में कहीं अधिक आम है, और वर्ग के तत्व "classB" किसी भी प्रकार की है कि किसी भी अंदर नेस्टेड है लक्षित करेगी वर्ग "कक्षा ए" के तत्व का प्रकार।

.classA .classB { 
    border: 1px solid; } 

यह काम करेगा, उदाहरण के लिए, पर:

<div class="classA"> 
    <p class="classB">asdf</p> 
</div> 

यह एक, तथापि, तत्व है कि दोनों वर्ग "ClassA", और साथ ही वर्ग "classB" है किसी भी प्रकार निशाना बनाता है। इस प्रकार की शैली कम बार देखी जाती है, लेकिन कुछ परिस्थितियों में अभी भी उपयोगी है। निम्नलिखित पर

<p class="classA classB">asdf</p> 

हालांकि, यह कोई असर नहीं होगा::

.classA.classB { 
    border: 1px solid; } 

यह इस उदाहरण पर लागू होगा

<p class="classA">fail</p> 
<p class="classB">fail</p> 

(ध्यान दें कि किसी HTML तत्व कई वर्गों है जब, वे रिक्त स्थान से अलग होते हैं।)