सीएसएस !महत्वपूर्ण नियम
क्या महत्वपूर्ण है?
CSS में नियम का !importantउपयोग किसी संपत्ति/मूल्य को सामान्य से अधिक महत्व देने के लिए किया जाता है।
वास्तव में, यदि आप !importantनियम का उपयोग करते हैं, तो यह उस तत्व पर उस विशिष्ट संपत्ति के लिए पिछले सभी स्टाइलिंग नियमों को ओवरराइड कर देगा!
आइए एक उदाहरण देखें:
उदाहरण
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
उदाहरण समझाया गया
ऊपर के उदाहरण में। सभी तीन अनुच्छेदों को एक लाल पृष्ठभूमि रंग मिलेगा, भले ही आईडी चयनकर्ता और वर्ग चयनकर्ता की विशिष्टता अधिक हो। नियम दोनों ही मामलों में संपत्ति को ओवरराइड !importantकरता है।
background-color
के बारे में महत्वपूर्ण !महत्वपूर्ण
!important
एक नियम को ओवरराइड करने का एकमात्र तरीका !important
स्रोत कोड में समान (या उच्चतर) विशिष्टता के साथ एक घोषणा पर एक और नियम शामिल करना है - और यहाँ समस्या शुरू होती है! यह CSS कोड को भ्रमित करता है और डिबगिंग कठिन होगी, खासकर यदि आपके पास एक बड़ी स्टाइल शीट है!
यहां हमने एक सरल उदाहरण बनाया है। यह बहुत स्पष्ट नहीं है, जब आप CSS स्रोत कोड को देखते हैं, तो कौन सा रंग सबसे महत्वपूर्ण माना जाता है:
उदाहरण
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
युक्ति: नियम के बारे में जानना अच्छा है !important
, आप इसे कुछ CSS स्रोत कोड में देख सकते हैं। हालाँकि, इसका उपयोग तब तक न करें जब तक कि आपको बिल्कुल न करना पड़े।
शायद !महत्वपूर्ण . के एक या दो उचित उपयोग
उपयोग करने का एक तरीका यह !importantहै कि यदि आपको ऐसी शैली को ओवरराइड करना है जिसे किसी अन्य तरीके से ओवरराइड नहीं किया जा सकता है। यह तब हो सकता है जब आप सामग्री प्रबंधन प्रणाली (सीएमएस) पर काम कर रहे हों और सीएसएस कोड को संपादित नहीं कर सकते। फिर आप कुछ सीएमएस शैलियों को ओवरराइड करने के लिए कुछ कस्टम शैलियाँ सेट कर सकते हैं।
उपयोग करने का दूसरा तरीका !importantहै: मान लें कि आप किसी पृष्ठ के सभी बटनों के लिए एक विशेष रूप चाहते हैं। यहां, बटनों को धूसर पृष्ठभूमि रंग, सफेद टेक्स्ट और कुछ पैडिंग और बॉर्डर के साथ स्टाइल किया गया है:
उदाहरण
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
एक बटन का रूप कभी-कभी बदल सकता है यदि हम इसे उच्च विशिष्टता वाले किसी अन्य तत्व के अंदर रखते हैं, और गुण परस्पर विरोधी हो जाते हैं। इसका एक उदाहरण यहां दिया गया है:
उदाहरण
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
सभी बटनों को समान दिखने के लिए "मजबूर" करने के लिए, कोई फर्क नहीं पड़ता, हम !important
बटन के गुणों में नियम जोड़ सकते हैं, जैसे:
उदाहरण
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}