ब्राउज़र विरोधाभासी वर्गों को कैसे हल करते हैं?

Question

मैं जानता हूँ कि यह HTML में एक तत्व पर कई वर्गों निर्दिष्ट करने के लिए संभव है:

<div class='one two'>Text</div> 

ऐसा लगता कक्षाएं एक एकल स्ट्रिंग के रूप में जावास्क्रिप्ट से सुलभ हैं की तरह।

क्या होता है जब वर्ग विरोधाभासी गुणों के साथ निर्दिष्ट होते हैं? उदाहरण के लिए

div.one { 
    background-color: red; 
    color: blue; 
} 
div.two { 
    background-color: green; 
} 

क्या परिणाम कक्षाओं में निर्दिष्ट आदेश पर निर्भर करेगा? उदाहरण के लिए, क्या मैं उचित रूप से नीले पाठ और हरे रंग की पृष्ठभूमि के साथ दिखाई देने वाले div की अपेक्षा कर सकता हूं, क्योंकि two वर्ग का मूल्यांकन दूसरा हो जाता है, background-color संपत्ति को ओवरराइट कर रहा है?

Answer 1

पढ़ें विशिष्टता के बारे में:

• Simple explanation
• More in depth explanation

संक्षिप्त उत्तर: यदि दो चयनकर्ताओं की एक ही विशिष्टता है, तो आखिरी घोषित घोषित किया जाएगा।

Answer 2

http://jsfiddle.net/mrtsherman/2NpXS/

स्टाइलशीट के आदेश पर निर्भर करता है। बाद में स्टाइल घोषणाएं प्राथमिकता लेती हैं। आप देखने के लिए दो सीएसएस लाइनों को उलटा कर सकते हैं।

Answer 3

यदि चयनकर्ताओं के पास same level of precedence (जैसा कि वे यहां करते हैं) हैं, जो भी निर्दिष्ट है बाद में प्राथमिकता लेता है। इस मामले में, पृष्ठभूमि हरा होना चाहिए, लेकिन फ़ॉन्ट रंग नीला होना चाहिए।

CSS spec से

: अगर दो घोषणाओं ही वजन, मूल और विशिष्टता, बाद निर्दिष्ट जीत है:

अंत में, सॉर्ट क्रम निर्दिष्ट द्वारा। आयातित स्टाइल शीट में घोषणाएं स्टाइल शीट में घोषणाओं से पहले मानी जाती हैं।

Answer 4

आप इन शैली के लिए उपयोग कर रहे हैं जिन्हें "कैस्केडिंग स्टाइल शीट" कहा जाता है। कैस्केडिंग भाग का मतलब है कि यह झरना और भविष्य के नियमों की तरह पिछले (या ओवरराइट) पर आधारित है। इस प्रकार दूसरा नियम पृष्ठभूमि-रंग की संपत्ति को ओवरराइट करेगा लेकिन यह अभी भी फ़ॉन्ट रंग बनाए रखेगा।

(पूर्वता हालांकि साथ सावधान रहना होगा। एक नियम है कि एक आईडी के बंद है एक है कि वे कहाँ रखा जाता है की परवाह किए बिना एक वर्ग के बंद हो जाता है से अधिक उच्च प्राथमिकता चला जाता है।)

Answer 5

सीएसएस का एक बहुत ही अच्छी तरह से परिभाषित आदेश है पूर्वता।

इस तरह के उदाहरणों में, जहां सब कुछ समान है और प्राथमिकता बराबर है, ब्राउज़र को स्टाइलशीट में अंतिम रूप से परिभाषित शैली चुननी चाहिए।

उदाहरण में आपने दिया है, इसका मतलब यह होगा कि div.two शैलियों div.one ओवरराइड करेंगे, जहां वही संपत्ति दोनों में परिभाषित की गई है।

वैसे भी, यह वही सुविधा है जो आपको विभिन्न ब्राउज़र सुविधाओं का समर्थन करने के लिए एक ही चयनकर्ता के साथ एक ही संपत्ति के साथ कई शैलियों को परिभाषित करने की अनुमति देती है। उदाहरण के लिए, कुछ ब्राउज़रों RGBA रंग का समर्थन नहीं कर सकते हैं, तो आप निम्न कर सकते हैं:

.myclass { 
    background: rgb(200, 54, 54); 
    background: rgba(200, 54, 54, 0.5); 
} 

सभी ब्राउज़रों पिछले background घोषणा है कि वे समर्थन ले जाएगा, इसलिए ब्राउज़रों जो rgba समर्थन दूसरा एक का चुनाव करेगा, जबकि ब्राउज़रों ऐसा नहीं है, पहले के साथ करेंगे।

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

Answer 6

परिणाम आदेश कक्षाओं में निर्दिष्ट कर रहे हैं पर निर्भर करते हैं

यहाँ आदेश पर एक अच्छा लेख है, जिसमें सीएसएस नियम क्रियान्वित कर रहे हैं क्या है:। http://htmlhelp.com/reference/css/structure.html