`.Class1.class2` और `class1 .class2` CSS नियम के बीच क्या अंतर है?

मेरे पास कुछ पंक्तियों वाला एक टेबल है:`.Class1.class2` और `class1 .class2` CSS नियम के बीच क्या अंतर है?

<table> 
    <tr class="even"><td>tr0</td></tr> 
    <tr><td>tr1</td></tr> 
    <tr class="even"><td>tr2</td></tr> 
</table>

मेरे पास पंक्तियों के लिए एक सीएसएस नियम (नियम 1) है:

.even{ 
    background-color: blue; 
}

मेरे पास किसी भी पंक्ति के बीजीकलर को ओवरराइड करने के लिए एक और नियम (नियम 2) है:

.override, .override.even{ 
    background-color: green; 
}

अजीब चीज IE9 में है सभी even पंक्तियां (कोई override वर्ग के साथ) हरे रंग की हैं!
डेवलपर टूल even पंक्तियों के लिए यह दिखाता है:

enter image description here

इन दो स्थितियों में आईई सही ढंग से काम करता है:

अगर मैं इस तरह नियम 2 को फिर से लिखता हूं:

.override, .override .even{ ... }

अगर मैं चलता हूं नियम 2 से ऊपर नियम 2:

.override, .override.even{ ... } 
.even { ... }

प्रश्न .override.even और .override .even के बीच क्या अंतर है?

संपादित करें:

उत्तर के लिए धन्यवाद। एक अन्य सवाल जिसे मैं पूछना भूल गया था, क्यों आईई even पंक्तियों को हरा दिखाता है?

स्रोत

2011-10-21 Pedram Behroozi

.override .even = किसी भी तत्व का चयन करें जिसमें "यहां तक कि" की श्रेणी है जो किसी भी तत्व का निर्णायक है जिसमें "ओवरराइड" – Jawad

"override.even = "किसी भी तत्व का चयन करें जिसमें" ओवरराइड " "या/और" यहां तक कि " – Jawad

आपको कहीं कुछ विवादित कोड होना चाहिए। जब मैं इसका परीक्षण करता हूं, पंक्तियां नीली रहती हैं: http://jsfiddle.net/Guffa/e3w4q/ – Guffa

कक्षा विनिर्देशकों के बीच अंतर का मतलब एक वरदान -> वंश संबंध है।

नियम:

.test .heading { font-weight: bold; }

<p> तत्व यहां पर लागू होगा:

<span class="test"><p class="heading">Something</p></span>

स्थान की कमी का मतलब है कि तत्व दोनों वर्गों नियम लागू करने के लिए होना चाहिए।

नियम: एक .even वर्ग के साथ एक और तत्व के साथ,

<p class="heading major">Major heading</p>

स्रोत

2011-10-21 19:39:27 Andre

धन्यवाद। लेकिन आईई में क्यों सभी 'यहां तक कि पंक्तियां नीली की बजाय हरे रंग की हैं? –

अंतर का मतलब माता-पिता -> बाल संबंध नहीं है। इसका मतलब है अभिजात वर्ग -> निर्णायक संबंध। एक माता-पिता जरूरी है कि एक अभिभावक है लेकिन एक एसेडनाट अनिवार्य रूप से माता-पिता नहीं है। एक बच्चा जरूरी है कि वह एक निर्णायक है लेकिन एक वंशज है और न ही एक बच्चा जरूरी है। – Jawad

@ जवाड़: बहुत अच्छी तरह से, विधिवत नोट किया और संपादित किया गया। – Andre

.override .even एक 'ओवरराइड' वर्ग के साथ के रूप में "कुछ तत्व व्याख्या की है:

.heading.major { color: blue; }

<p> तत्व यहां पर लागू होगा इसके अंदर घोंसला है। यह मूल रूप से ul li जैसा ही है, लेकिन सीएसएस कक्षाओं में आवेदन कर रहा है।

override.even को "दोनों ओवरराइड और यहां तक कि कक्षाओं के साथ कुछ एकल तत्व" के रूप में व्याख्या किया जाता है।

स्रोत

2011-10-21 19:42:54

दोनों उत्तर सही हैं, लेकिन वे समझा नहींते हैं, क्यों IE दोनों पंक्तियों को हरा दिखाता है।

ऐसा इसलिए है क्योंकि आईई में "मानक" और "quirks" मोड है।एकाधिक कक्षा चयनकर्ताओं को काम करने के लिए, आपको फ़ाइल की शुरुआत में उचित DOCTYPE का उपयोग करने की आवश्यकता है।

अब आप "क्विर्क" मोड में हैं और आईई एकाधिक चयनकर्ताओं का समर्थन नहीं करता है, यह केवल नवीनतम कक्षा को देखता है। तो यह यह देखता है और पंक्तियों हरे हैं:

.even { 
    background-color: blue; 
} 
.override, .even { 
    background-color: green; 
}

रखो

<!DOCTYPE html>

(या किसी अन्य DOCTYPE) फ़ाइल की शुरुआत में और दोनों पंक्तियों की उम्मीद के रूप में नीले होने जा रहे हैं।

स्रोत

2011-10-21 19:53:24 Petr

आप कैसे जानते हैं कि वह quirks मोड में है? – Jawad

क्योंकि उनके पास इन दो पंक्तियों में हरा है और कई वर्ग चयनकर्ता उनके लिए काम नहीं कर रहे हैं। ये दो पंक्तियां नीली होनी चाहिए क्योंकि वे अन्य ब्राउज़रों में हैं। – Petr

+1 यह संभवतः कारण है। क्विर्क मोड में टिप्पणियों से जुड़ी हुई पहेली को चलाने से हरी पृष्ठभूमि वाली रेखाएं मिलती हैं। – Guffa

देखें W3C [CSS] Selector (Level 3) "Recommendation":

.override .evenदोsimple selectors एक अंतरिक्ष से अलग कर दिया है (जो descendant combinator है, सीएसएस खाली स्थान के प्रति संवेदनशील है):

समय में, लेखकों चयनकर्ताओं का वर्णन करने के लिए कर सकते हैं एक तत्व जो दस्तावेज़ पेड़ में किसी अन्य तत्व के वंशज है (उदाहरण के लिए, "एक ईएम तत्व जो एच 1 तत्व के भीतर निहित है")। वंशज संयोजक इस तरह के रिश्ते को व्यक्त करते हैं। एक वंशज संयोजनकर्ता व्हाइटस्पेस है जो साधारण चयनकर्ताओं के दो अनुक्रमों को अलग करता है। प्रपत्र की एक चयनकर्ता "अटल बिहारी" एक तत्व बी

इस चयनकर्ता evenतभी अगर वहाँ एक पूर्वज मौजूद तत्वों वर्ग है से मेल खाएगा कुछ पूर्वज तत्व ए के एक मनमाना वंशज है कि प्रतिनिधित्व करता - जरूरी नहीं माता पिता! - कक्षा override के साथ तत्व। (कुछ फिल्मों में पात्रों के विपरीत, एक तत्व कभी नहीं उसके अपने पूर्वज ;-)

.override.even है एक simple selector sequence:

सरल चयनकर्ताओं का एक अनुक्रम सरल चयनकर्ताओं की एक श्रृंखला है कि अलग नहीं कर रहे हैं एक संयोजक द्वारा। यह हमेशा एक प्रकार चयनकर्ता या सार्वभौमिक चयनकर्ता के साथ शुरू होता है। अनुक्रम में कोई अन्य प्रकार चयनकर्ता या सार्वभौमिक चयनकर्ता की अनुमति नहीं है।

एक साधारण चयनकर्ता अनुक्रम मूल्यांकन किया जाता है के रूप में व्यक्तिगत सरल चयनकर्ताओं की conjunction एक ही तत्व के लिए आवेदन किया: कि है, यह केवल तभी लागू दोनोंoverrideऔरeven वर्गों के साथ तत्वों से मेल खाएगी।

हैप्पी कोडिंग।

स्रोत

2011-10-21 19:58:25

`.Class1.class2` और `class1 .class2` CSS नियम के बीच क्या अंतर है?

उत्तर

संबंधित मुद्दे