सीएसएस !इम्पोर्टेंट रूल

!important क्या है?

CSS में !important नियम का उपयोग किया है

वास्तव में, अगर आपने !important नियम, जो इस एलीमेंट पर इस विशेष गुण के पहले सभी शैली नियमों को कवर करेगा!

हम एक उदाहरण देखें:

इस्टेंस

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

स्वयं प्रयोग करें

उदाहरण व्याख्या

उपरोक्त उदाहरण में, सभी तीनों पैराग्राफ को लाल पृष्ठ-रंग प्राप्त होगा, भले ही ID चयनक और क्लास चयनक अधिक विशिष्टता वाले हों!important नियम कवर करता है दोनों स्थितियों में background-color गुण

!important के बारे में जानकारी

कवर करना !important नियम को एक अन्य विशिष्टता (या अधिक) वाले घोषणा में समाविष्ट करके उसे उच्चतर विशिष्टता देने के लिए एकमात्र तरीका है !important नियम - यही समस्या की शुरुआत है! यह CSS कोड को भ्रष्ट करता है और डिबग करना भी कठिन होता है, खासकर जब आपके पास बड़े शैली तालिका हो

यहाँ हम एक साधारण उदाहरण बनाते हैं। जब आप CSS स्रोत कोड देखते हैं, तो इसका रंग किसने अधिक महत्व का है, इसे समझना कठिन होता है:

इस्टेंस

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

स्वयं प्रयोग करें

इंगित:समझें !important नियम है अच्छा। आप कुछ CSS स्रोत कोड में इसे देख सकते हैं। लेकिन, अगर आपको अनिवार्य रूप से इसका उपयोग करना है तो नहीं, तो इसका उपयोग न करें।

एक दो विशेष उपयोग !important हो सकते हैं

एक अन्य उपयोग !important स्थिति है, अगर आप किसी तरह से नहीं कवर कर सकते हैं तो आपको नष्ट करने वाले शैली को कवर करना होगा। यह इसलिए हो सकता है कि आप किसी सामग्री प्रबंधन प्रणाली (CMS) का उपयोग कर रहे हैं और CSS कोड को संपादित नहीं कर सकते हैं। तो आप कुछ अनुकूल शैली को सेट करके कुछ CMS शैली को कवर कर सकते हैं।

एक अन्य उपयोग !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;
}

स्वयं प्रयोग करें