एकाधिक सीएसएस क्लासेस:

परिभाषित आदेश के आधार पर गुण ओवरलैपिंग क्या सीएसएस में कोई नियम है जो किसी तत्व पर एकाधिक कक्षाओं को परिभाषित करते समय कैस्केडिंग ऑर्डर निर्धारित करता है? (class="one two" बनाम class="two one")एकाधिक सीएसएस क्लासेस:

अभी, ऐसा कोई प्रभाव नहीं प्रतीत होता है।

उदाहरण: दोनों divs फ़ायरफ़ॉक्स

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
    <head> 
    <style> 
     .one { border: 6px dashed green } 
     .two { border: 6px dashed orange } 
    </style> 
    </head> 

    <body> 

    <div class="one two"> 
    hello world 
    </div> 

    <div class="two one"> 
    hello world 
    </div>

स्रोत

2010-06-17 太極者無極而生

देखें [इसी तरह का प्रश्न] (http://stackoverflow.com/q/13849655/287948), जहां फोकस डब्ल्यू 3 सी मानक है जो कई नामों को समझने के लिए निर्दिष्ट करता है। –

यह ध्यान रखना अच्छा है कि यदि आपके पास एक विशिष्ट तत्व पर लागू कक्षा है, तो एक सामान्य वर्ग इसे ओवरराइड नहीं करेगा, यानी यदि आपकी शैली div.one .two की तरह दिखती है, तो div div.one को ओवरराइड नहीं करेगा। (सफारी में परीक्षण किया गया) – paulrehkugler

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

.one { border: 6px dashed green } 
.two { border: 6px dashed orange }

बनाम

.two { border: 6px dashed green } 
.one { border: 6px dashed orange }

स्रोत

2010-06-17 23:40:48 edl

** नोट करें कि तत्व तत्व में स्टाइलशीट लिंक अनुक्रम भी परिभाषित करना महत्वपूर्ण है जिसे पहले घोषित किया जाएगा **। मुझे बस इसका एहसास है और मेरे सीएसएस को जेवीरी यूआई सीएसएस ओवरराइट करने से बचने के लिए jquery UI css लिंक को पहले से बंद करने के लिए लिंक करें, जब कक्षाओं में वही वज़न/विशिष्टता (0,1,0,0) हो, हम तब भी ओवरराइट कर सकते हैं उपयोगकर्ता द्वारा आईडी का उपयोग करने जैसे अधिक विशिष्ट या '.parent .one' जैसे एक से अधिक वर्गों का चयन करें। – CallMeLaNN

वर्ग परिभाषितपिछले सीएसएस क्या इन मामलों में जीतता है में पर नारंगी रंग हैं। तत्व पर ऑर्डर कोई फर्क नहीं पड़ता, यह उन सभी ब्राउज़रों में सुसंगत है जिन्हें मैं जानता हूं, मैं प्रासंगिक स्पेस बिट्स को आजमाउंगा और इंडेक्स करूंगा।

पूरे वर्ग को जीतने नहीं है, गुण व्यक्तिगत रूप से, जीत अगर .one एक संपत्ति है कि .two आप निश्चित रूप से इन <div> तत्वों दोनों पर है कि संपत्ति देखना होगा नहीं किया था।

स्रोत

2010-06-17 23:40:20

बस ध्यान दे रहा है: कई वर्ग नियमों का उपयोग करके आईई 6 में वास्तव में एक अंतर (पढ़ना: बग) है। यद्यपि इस साधारण मामले में लागू नहीं होता है। :) – deceze

@deceze - केवल आईई 6 में, जिसे मैं इस बिंदु पर उपेक्षा करता हूं ... लेकिन हाँ जो केवल * नियम * पर लागू होता है, * * * का उपयोग नहीं करता है, उदा। सीएसएस में '.wowo.one' बनाम'one.two'। –

इसलिए बूटस्ट्रैप जैसे पहले से बनाई गई स्टाइलशीट के साथ काम करते समय यह _really_ अच्छा हो जाता है ... – My1

ओवरराइड जिस क्रम में कक्षाओं की घोषणा की जाती में क्या होगा। तो .two हमेशा

स्रोत

2010-06-17 23:40:59

कक्षा विशेषता का क्रम एक बिट से कोई फर्क नहीं पड़ता। यह कई चीजों पर निर्भर करता है, आपके मामले में यह वह क्रम है जिसमें आपका सीएसएस लिखा गया है।

दोनों शैलियों में समान विशिष्टता है, इसलिए। दो शैली शैली की ओवरराइड करता है क्योंकि यह शैली टैग में कम है।

स्रोत

2010-06-17 23:41:03

मुझे लगता है कि यह स्पष्ट है कि ऐसा कोई नियम लागू नहीं होता है। नियम .one में नियम .two के समान विशिष्टता है, इसलिए सीएसएस मानक के अनुसार .two ब्लॉक में गुण .one में ओवरराइड करते हैं क्योंकि .two ब्लॉक बाद में दिखाई देता है। class विशेषता में शब्दों के क्रम में कहीं भी कोई संदर्भ नहीं बनाया गया है।

स्रोत

2010-06-17 23:44:41 hobbs

तत्व स्टाइलशीट को परिभाषित करने के लिए एकाधिक कक्षाओं का उपयोग करते समय आप स्टाइलशीट के "कैस्केटिंग" को ओवरराइड करने के लिए !important का उपयोग कर सकते हैं।

.one { border: 6px dashed green !important } 
.two { border: 6px dashed orange }

यह आपके divs हरा बना देगा।

स्रोत

2010-06-17 23:55:28

संदेह में, फ़ायरबग में पृष्ठ देखें। यह उन कक्षाओं को हड़ताल करेगा जो ओवरराइड हैं और वे पृष्ठ दिखाए गए क्रम को दिखाएं।

यह भी ध्यान दें कि इनलाइन शैलियों बाहरी स्टाइलशीट में घोषित किए गए लोगों को ओवरराइड कर देंगे। आप व्यापक श्रृंखला वायुसेना प्रयोज्यता को तोड़ने के लिए चाहते हैं, आप के रूप में

p {margin: 10px 5px 0 10px !important}

में यह ! महत्वपूर्ण declration दूसरों स्थिति की परवाह किए बिना ओवरराइड करने के लिए कारण होगा ! महत्वपूर्ण घोषणा कर सकते हैं।कुछ इसे खराब अभ्यास के रूप में देखते हैं, लेकिन अगर यह समझदारी से इस्तेमाल किया जाता है तो यह आसान हो सकता है।

स्रोत

2010-06-18 00:31:37 Laramie

जैसा कि अन्य उत्तरों ने ध्यान दिया है, वर्ग विशेषता में घोषित आदेश का कोई प्रभाव नहीं है - प्राथमिकता सीएसएस फ़ाइल में घोषणाओं के आदेश से आती है।

हालांकि, अगर आप वास्तव में कुछ है कि वर्ग विशेषता में आप के लिए "नकली" प्राथमिकता की अनुमति देता है नकली करना चाहते हैं, तो आप की कोशिश कर सकते:

.one-first { border: 6px dashed green } 
     .two-first { border: 6px dashed orange } 

    .one { border: 6px dashed green } 
     .two { border: 6px dashed orange }

और फिर

<div class="one-first two"/>

और

<div class="two-first one"/>

आखिरी जीत के साथ प्राथमिकता का आदेश देगा (सीएसएस प्रोपर्टी के समान समानता में पिछली प्राथमिकता लेना।)

स्रोत

2010-06-18 00:33:30 mdma

एकाधिक सीएसएस क्लासेस:

उत्तर

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