सीएसएस विशेषता

विशिष्टता क्या है?

यदि एक ही एलिमेंट के लिए दो या अधिक टकरावदार CSS नियम हैं, तो ब्राउज़र कुछ सिद्धांतों का अनुसरण करता है ताकि सबसे विशिष्ट नियम को निर्धारित कर सके और इसके कारण जीत जाए।

विशिष्टता (specificity) को स्कोर/ग्रेड के रूप में देखा जाए, ताकि अंततः कौन-सा शैली घोषणा एलिमेंट पर लागू की जाए, यह निर्धारित कर सकता है।

सामान्य चयनकर्ता (*) कम विशिष्टता रखता है, जबकि ID चयनकर्ता की विशिष्टता अधिक है!

ध्यान दें：यह विशिष्टता एक आम कारण है कि CSS नियम कुछ एलिमेंटों पर लागू नहीं होते, भले ही आपको लगता हो कि इसका लागू होना चाहिए।

विशिष्टता तालिका

प्रत्येक चयनकर्ता विशिष्टता तालिका में अपनी स्थिति है. नीचे दिए चार प्रकार के चयनकर्ता विशिष्टता स्तर निर्धारित करते हैं:

इनलाइन शैली - इनलाइन (इनलाइन) शैली सीधे जिस एलिमेंट को शैली लगाना है के अद्वितीय पहचानकर्ता पर जोड़ी जाती है. उदाहरण: <h1 style="color: #ffffff;">。

ID - ID पृष्ठ के एलिमेंट का अद्वितीय पहचानकर्ता है, जैसे #navbar。

क्लास, एट्रिब्यूट और प्रत्यायकर्ता - यह श्रेणी .classes, [attributes] और प्रत्यायकर्ता शामिल है, जैसे :hover, :focus आदि。

एलिमेंट और प्रत्यायकर्ता - यह श्रेणी एलिमेंट नाम और प्रत्यायकर्ता शामिल है, जैसे h1, div, :before और :after。

कैसे विशिष्टता गणना की जाए?

विशिष्टता की गणना के तरीके को याद रखें!

0 से शुरू करके, style एट्रिब्यूट के लिए 1000, प्रत्येक ID के लिए 100, प्रत्येक एट्रिब्यूट, क्लास या प्रत्यायकर्ता के लिए 10, प्रत्येक एलिमेंट नाम या प्रत्यायकर्ता के लिए 1 जोड़ें。

नीचे दिए तीन कोड फ़ेचर्स को सोचिए:

इंस्टांस

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A की विशिष्टता 1 (एक एलिमेंट) है
  • B की विशिष्टता 101 (एक ID रेफरेंस और एक एलिमेंट) है
  • C की विशिष्टता 1000 (इनलाइन शैली) है

क्योंकि 1 < 101 < 1000, इसलिए तीसरा नियम (C) अधिक विशिष्ट है, इसलिए यह लागू किया जाएगा。

विशिष्टता नियम 1:

विशिष्टता समान होने पर: नवीनतम नियम महत्वपूर्ण है - यदि एक ही नियम बार-बार बाहरी शैली पट्टी में लिखा जाए, तो शैली पट्टी में अंतिम नियम जिसे लगाना है के नजदीक होगा, इसलिए यह लागू किया जाएगा:

इंस्टांस

h1 {background-color: yellow;}
h1 {background-color: red;}

अपने आप से प्रयास करें

अगला नियम हमेशा लागू होता है。

विशिष्टता नियम 2:

ID चयनकर्ता अटेब्यूट चयनकर्ता से अधिक विशिष्ट है - नीचे दिए तीन पंक्तियों को देखें:

इंस्टांस

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

अपने आप से प्रयास करें

पहला नियम अन्य दोनों से अधिक विशिष्ट है, इसलिए यह लागू किया जाएगा。

विशिष्टता नियम 3:

संदर्भ चयनकर्ता एकल एलिमेंट चयनकर्ता से अधिक विशिष्ट है - इंटरलिंक शैली पट्टी जिसे शैली लगाना है के नजदीक होती है. इसलिए निम्नलिखित परिस्थितियों में:

इंस्टांस

विदेशी CSS फ़ाइल से आया है:

#content h1 {background-color: red;}

HTML फ़ाइल में:

<style>
#content h1 {
  background-color: yellow;
}
</style>

अगले नियम प्रयोग किया जाएगा。

विशिष्टता नियम 4：

क्लास चयनक किसी भी संख्या के एलिमेंट सेलेक्टर को हराता है - क्लास चयनक (जैसे .intro है और h1, p, div आदि को हराता है):

इंस्टांस

.intro {background-color: yellow;}
h1 {background-color: red;}

अपने आप से प्रयास करें

इसके अलावा，जनरल सेलेक्टर और संचारित मूल्य 0 है - * की विशिष्टता, body * और अन्य के समान 0 की विशिष्टता है।संचारित मूल्य की विशिष्टता भी 0 है।