2009-08-24 10 views
81

मैं सीएसएस और class विशेषता के बारे में थोड़ा उलझन में हूं। मैंने हमेशा सोचा, जिस क्रम में मैं विशेषता मान में एकाधिक वर्ग निर्दिष्ट करता हूं उसका अर्थ है। बाद की कक्षा पिछले की परिभाषाओं को ओवरराइट कर सकती है, लेकिन यह काम नहीं लगती है।सीएसएस कक्षाओं के क्रम को कैसे निर्दिष्ट करें?

<html> 
<head> 
<style type="text/css"> 
    .extra { 
     color: #00529B; 
     border:1px solid #00529B; /* Blue */ 
     background-color: #BDE5F8; 
    } 

    .basic { 
      border: 1px solid #ABABAB; 
    } 
</style> 
</head> 
<body> 
    <input type="text" value="basic" class="basic"/> 
    <input type="text" value="extra" class="extra"/> 
    <input type="text" value="basic extra" class="basic extra"/> 
    <input type="text" value="extra basic" class="extra basic"/> 
</body> 
</html> 

मैं उम्मीद होती है, class="basic extra" साथ तीसरा उदाहरण, एक नीले बॉर्डर होना चाहिए के बाद से अतिरिक्त निर्दिष्ट सीमा में बुनियादी से सीमा के ऊपर लिख होगा: यहाँ एक उदाहरण है।

मैं ubuntu 9.04

उत्तर

182

जिस क्रम में एक वर्ग 'विशेषताओं अधिलेखित आदेश कक्षाएं वर्ग विशेषता में परिभाषित कर रहे हैं द्वारा निर्दिष्ट नहीं है, लेकिन इसके बजाय वे कहाँ सीएसएस

.myClass1 {font-size:10pt;color:red} 
.myClass2 {color:green;} 

एचटीएमएल

<div class="myClass2 myClass1">Text goes here</div> 
में दिखाई देते हैं

div में पाठ हरा दिखाई देगा और लाल नहीं होगा क्योंकि myClass2 मेरी कक्षा 1 की तुलना में सीएसएस परिभाषा में कम है। अगर मैं वर्ग विशेषता में कक्षा के नामों के क्रम को स्वैप करना चाहता था, तो कुछ भी नहीं बदलेगा।

+12

वाह, मुझे वास्तव में यह गलत मिला। आश्चर्यजनक है कि मैं इसे महसूस किए बिना कितना समय बना सकता हूं :-) –

+1

हाँ, यह स्पष्ट नहीं है और मैंने वही किया जो आपने किया था। इसे समझने के लिए मुझे घंटों लगा। – Zoidberg

+0

मुझे यह कभी नहीं पता था :) ग्रेट टिप –

19

कक्षाएं के आदेश पर एफएफ 3 उपयोग कर रहा हूँ विशेषता में अप्रासंगिक है। class विशेषता में सभी वर्ग तत्व के लिए समान रूप से लागू होते हैं।

सवाल यह है कि शैली नियम आपकी ऑर्डर में आपकी ऑर्डर में दिखाई देता है। आपके उदाहरण में, .basic.extra के बाद आता है, इसलिए .basic नियम जहां भी संभव हो प्राथमिकता लेंगे।

आप एक तीसरी संभावना प्रदान करने के लिए (उदाहरण के लिए, कि यह .basic, लेकिन उसमें .extra नियम अब भी लागू करना चाहिए) चाहते हैं तो आप शायद एक और वर्ग, .basic-extra आविष्कार करने के लिए है, जो स्पष्ट रूप से उस के लिए प्रदान करता है की आवश्यकता होगी।

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