CSS тандагычтарынын өзгөчөлүгү жөнүндө эмне билесиз…

Специфичность CSS эрежелеринин артыкчылыгын аныктайт, алардын кагылышуусунда, бир элементке ар башка стили колдонулганда. Ал ар бир селектор үчүн эсептелет.

Специфичность — бул төрт категориядан (A, B, C, D) турган сандык баа, 0,0,0,0 түрүндө жазылат. Сан чоңураак болсо, спецификалык жогору болот.

Категориялар:

A (inline стиль): HTML элементинде style атрибуту аркылуу берилген стильдер. Алар эң жогорку спецификалыкка ээ (мисалы, 1,0,0,0).
B (ID): ID боюнча селекторлор (мисалы, #my-id). Экинчи санды көбөйтөт (мисалы, 0,1,0,0).
C (Класс, атрибут, псевдокласс): Класс боюнча селекторлор (мисалы, .my-class), атрибут (мисалы, [type="text"]), псевдокласс (мисалы, :hover, :first-child). Үчүнчү санды көбөйтөт (мисалы, 0,0,1,0).
D (Элемент, псевдоэлемент): HTML тегдери (мисалы, div, p) жана псевдоэлементтер (мисалы, ::before, ::after). Төртүнчү санды көбөйтөт (мисалы, 0,0,0,1).

Мисалдар:

p - 0,0,0,1
.my-class - 0,0,1,0
#my-id - 0,1,0,0
div p - 0,0,0,2 (эки тегдин жалпы спецификалык суммасы)
#my-id .my-class - 0,1,1,0 (ID жана класстын суммасы)
div#my-id.my-class:hover - 0,1,2,1 (тег, ID, класс жана псевдокласс суммасы)

Жаңы эрежелер:

inline style спецификалыгы ар дайым башка селекторлордун бардык топтомуна караганда жогору, !important белгиси менен эместир.
!important белгиси бар эрежелер эң жогорку артыкчылыкка ээ, ал even inline-дан да жогору. !important колдонуу кеңеш берилбейт, себеби аныктаманы кыйындатат.
Бирдей спецификалыкта, акыркы декларацияланган эреженин артыкчылыгы бар.
Универсал селектор (*) жана :where() псевдокласс спецификалыкты 0,0,0,0 кылат жана жалпы спецификалыкты көбөйтпөйт.

/*
  Спецификалык: 0,0,0,1
  Эгер башка күчтүү эрежелер жок болсо колдонулат
*/
p {
  color: blue;
}

/*
  Спецификалык: 0,0,1,0
  p тегине карата эрежени алмаштырат
*/
.text {
  color: green;
}

/*
  Спецификалык: 0,1,0,0
  `.text` классына карата эрежени алмаштырат
*/
#main-text {
  color: red;
}

/*
  Спецификалык: 1,0,0,0
  Эгер элемент `style="color: purple;"` атрибуту менен берилсе
*/
/* <p style="color: purple;">Мазмун</p> */

/*
  Өтө жогорку спецификалык, бардык эрежелерди алмаштырат
  Көп колдонуу сунушталбайт, эгер зарыл болбосо
*/
.override-text {
  color: black !important;
}

CSS тандагычтарынын өзгөчөлүгү жөнүндө эмне билесиз?