Тафовут дар CSS чист?

Штошкіфікацыя ў CSS — гэта механізм, які вызначае, якое правіла стылю будзе прымяняцца да элемента, калі да гэтага элемента прымяняецца некалькі правілаў.

Кожны селектар мае свой бал спецыфічнасці. Больш высокі бал азначае больш высокі прыярытэт.

Разлік спецыфічнасці базуецца на колькасці наступных кампанентаў у селектары (у парадку зменшэння важнасці):

• Сотні (1000): Правілы з !important (маюць найвышэйшы прыярытэт, але іх выкарыстанне не рэкамендуецца).
• Сотні (100): Інлайнаваныя стылі (напісаныя непасрэдна ў атрыбуце style HTML-тэга).
• Сотні (100): Ідэнтыфікатары (селектары па id, напрыклад #my-element).
• Дзесяткі (10): Класы (селектары па .class), псевдакласы (напрыклад :hover, :focus), атрыбуты (напрыклад [type="text"]).
• Адзіницы (1): Тыпы элементаў (назвы HTML-тэгаў, напрыклад div, p), псевдаэлементы (напрыклад ::before, ::after).
• Нуль (0): Універсальны селектар (*), камбінатары (> , +, ~), селектар бацькі (:not(), :is(), :where()) самі па сабе не дадаюць спецыфічнасці, але могуць уплываць на яе ўнутры дужак.

Прыклад разліку:

• p { ... } - Спецыфічнасць: 0-0-0-1
• .my-class { ... } - Спецыфічнасць: 0-0-1-0
• #my-id { ... } - Спецыфічнасць: 0-1-0-0
• div.my-class { ... } - Спецыфічнасць: 0-0-1-1
• ul > li.item[data-id="1"] { ... } - Спецыфічнасць: 0-0-2-2 (li, ul = 2; .item, [data-id="1"] = 2)

Калі два правілы маюць аднолькавую спецыфічнасць, прымяняецца правіла, якое знаходзіцца ніжэй у CSS-файле.

Прыклад:

/* Файл style.css */
.my-element {
  color: blue; /* Спецыфічнасць: 0-0-1-0 */
}

#element-id {
  color: red; /* Спецыфічнасць: 0-1-0-0 */
}

.my-element {
  font-weight: bold; /* Спецыфічнасць: 0-0-1-0, перапісвае папярэдняе правіла з такой жа спецыфічнасцю */
}

У гэтым выпадку тэкст элемента з id element-id будзе чырвоным, а тэкст элемента з класам my-element будзе сінім і тоўстым (сіняе перабіваецца чырвоным для элемента з абодвума селектарамі з-за больш высокай спецыфічнасці #element-id).

Разуменне спецыфічнасці важна для напісання прадказальнага і лёгка падтрымліваемага CSS. Пазбягайце празмерна складанай спецыфічнасці і выкарыстання !important для лепшага кіравання стылямі.