CSS में विशिष्टता नियम

पिछले उदाहरण में, दोनों चयनकर्ता समान थे और उनकी प्राथमिकता भी समान थी। इसका मतलब है, कि वह गुण जीतता था जो नीचे लिखा गया था।

ऐसी स्थितियाँ भी होती हैं जब एक पृष्ठ तत्व के लिए कई चयनकर्ता मेल खाते हैं। इस स्थिति में, संघर्षरत गुणों में से अधिक विशिष्ट, यानी अधिक सटीक चयनकर्ता जीतेगा। आइए विशिष्टता के नियमों पर विचार करें।

पहला नियम

क्लास हमेशा टैग चयनकर्ता को हरा देती है:

html<p class="text">text</p>

cssp {
  color: red;
}
.text {
  color: green; /* यह रंग लागू होगा */
}

Результат:

दूसरा नियम

आइडेंटिफायर हमेशा क्लास को हरा देता है:

html<p id="elem" class="text">text</p>

css.text {
  color: red;
}
#elem {
  color: green; /* यह रंग लागू होगा */
}

Результат:

तीसरा नियम

समान शर्तों के तहत, वह चयनकर्ता जीतता है जिसके更多 भाग हों। उदाहरण के लिए, यदि हमारे पास दो टैग चयनकर्ता हैं, तो वह जीतेगा जिसमें अधिक टैग हों:

html<div>
  <p>text</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* यह रंग लागू होगा */
}

Результат:

यदि दो क्लास चयनकर्ता हैं, तो वह जीतेगा जिसमें अधिक क्लासेस निर्दिष्ट हैं (यदि वहाँ टैग चयनकर्ता हों, तो वे प्रभावित नहीं करते):

html<div class="block">
  <p class="text">text</p>
</div>

css.text {
  color: red;
}
.block .text {
  color: green; /* यह रंग लागू होगा */
}

Результат: