CSS कक्षाओं के क्रम को कैसे निर्दिष्ट करें?

113

मैं CSS और 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 पर FF 3 का उपयोग कर रहा हूं

html css

— टिम बुथ
स्रोत

246

जिस क्रम में विशेषताएँ अधिलेखित की जाती हैं, वह उस क्रम से निर्धारित नहीं होती है जिस क्रम में कक्षाएं classविशेषता में परिभाषित की जाती हैं , लेकिन इसके बजाय वे सीएसएस में कहां दिखाई देती हैं।

.myClass1 {color:red;}
.myClass2 {color:green;}

<div class="myClass2 myClass1">Text goes here</div>

स्निपेट का विस्तार करें

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

— Zoidberg
स्रोत

14

मुझे समझ नहीं आ रहा है कि वे इसे इस तरह क्यों लागू करेंगे। मजेदार रूप से पर्याप्त है कि ज्यादातर सीएसएस अन्य चीजों के लिए भी मेरी राय है।

— बक्सर

@ क्योंकि नियम कैस्केडिंग हैं । वे फॉर्म को ऊपर से नीचे, बाएँ से दाएँ लागू करते हैं। मुझे समझ में आता है

— O-9

27

विशेषता में कक्षाओं का क्रम अप्रासंगिक है। classविशेषता में सभी वर्ग तत्व के समान रूप से लागू होते हैं।

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

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

— VoteyDisciple
स्रोत

4

यह किया जा सकता है, लेकिन आपको अपने चयनकर्ताओं के साथ थोड़ा रचनात्मक होना होगा। विशेषता चयनकर्ताओं का उपयोग करके, आप "शुरू होता है", "समाप्त होता है", "समाहित", आदि जैसी चीजों को निर्दिष्ट कर सकते हैं। अपने समान मार्कअप का उपयोग करके नीचे उदाहरण देखें, लेकिन विशेषता चयनकर्ताओं के साथ।

[class$="extra"] {
  color: #00529B;
  border:1px solid #00529B;
  background-color: #BDE5F8;
}
[class$="basic"] {
  border: 1px solid #ABABAB;
}
input {display:block;}

<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"/>

स्निपेट का विस्तार करें

— TravisV
स्रोत