CSS-dä spesifikasiýa düzgünleri

Öňki mysalda iki selektor hem deňdi we deň priýorite eýe boldy. Bu ýagdaýda aşakda ýazylan aýratynlyk utardy.

Şeýle hem, bir sahypa elementine birnäçe selektor degislilik edýän ýagdaýlar hem bar. Bu ýagdaýda, aýratynlyklaryň çaknyşmagynda has spesifik, ýagny has takyk selektor utar. Geliň spesifikasiýa düzgünlerini gözden geçireýli.

Birnji düzgün

Klassy her wagty tegiň selektoruny ýeňýär:

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

cssp {
  color: red;
}
.text {
  color: green; /* bu reňk goşular */
}

Результат:

Ikinji düzgün

Identifikator her wagty klassdan üstün çykýar:

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

css.text {
  color: red;
}
#elem {
  color: green; /* bu reňk goşular */
}

Результат:

Üçünji düzgün

Deň şertlerde, has köp bölekleri bolan selektor utar. Mysal üçin, eger iki tegiň selektory bolsa, onda has köp tegleri bolany utar:

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

cssp {
  color: red;
}
div p {
  color: green; /* bu reňk goşular */
}

Результат:

Eger iki klassyň selektory bolsa, onda has köp klass görkezilen selektor utar (eger ol ýerde tegiň selektorlary bolsa, onda olar täsir etmeýär):

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

css.text {
  color: red;
}
.block .text {
  color: green; /* bu reňk goşular */
}

Результат: