A specifikusság szabályai CSS-ben

Az előző példában mindkét szelektor azonos volt és azonos prioritással rendelkezett. Ez azt jelenti, hogy az a tulajdonság győzött, amelyik alul volt írva.

Vannak olyan helyzetek is, amikor egy oldalelem több szelektornak felel meg. Ebben az esetben, ha tulajdonságok ütköznek, a specifikusabb, azaz a pontosabb szelektor győz. Nézzük meg a specifikusság szabályait.

Első szabály

Az osztály mindig legyőzi az elem szelektort:

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

cssp {
  color: red;
}
.text {
  color: green; /* ez a szín lesz alkalmazva */
}

Результат:

Második szabály

Az azonosító mindig legyőzi az osztályt:

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

css.text {
  color: red;
}
#elem {
  color: green; /* ez a szín lesz alkalmazva */
}

Результат:

Harmadik szabály

Egyenlő feltételek mellett az a szelektor győz, amelyiknek több része van. Például, ha két elem szelektorunk van, akkor az győz, amelyikben több elem van:

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

cssp {
  color: red;
}
div p {
  color: green; /* ez a szín lesz alkalmazva */
}

Результат:

Ha két osztály szelektor van, akkor az győz, amelyikben több osztály van megadva (ha ott elem szelektorok is vannak, azok nem számítanak):

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

css.text {
  color: red;
}
.block .text {
  color: green; /* ez a szín lesz alkalmazva */
}

Результат: