CSSте өзгөчөлүк деген эмне?

CSSтеги өзгөчөлүгү — бул механизм, ал элементке кайсы стиль эрежеси колдонулушу керектигин аныктайт, эгерде бул элементке бир нече эрежелер колдонулса.

Ар бир селектор өзүнүн өзгөчөлүк баллына ээ. Жогорку балл — жогорку артыкчылык.

Өзгөчөлүктү эсептөө төмөнкү компоненттердин санына негизделген (маанилүүлүгүнө карата төмөндө):

• ** Жүздөр (1000):** !important менен белгиленген эрежелер (алар эң жогорку артыкчылыкка ээ, бирок алардын колдонулушу сунушталбайт).
• ** Жүздөр (100):** Ичке стилдер (HTML тегдин style атрибутунда түзүлгөн).
• ** Жүздөр (100):** Идентификаторлор (мисалы, #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, ал мурдагы эрежени кайра жазат ошол эле өзгөчөлүккө ээ */
}

Бул учурда element-id id менен белгиленген элемент кызыл түстө болот, ал эми my-element классы менен белгиленген текст көк жана калың болот (көк түс кызылды алмаштырат, анткени #element-id көбүрөөк өзгөчөлүккө ээ).

Өзгөчөлүктү түшүнүү CSS жазууда алдын ала көрүүгө жана оңой колдоого алууга маанилүү. Ата-элементтин өзгөчөлүгүн ашыкча кыйындатуудан жана !important колдонуудан алыс болуңуз, анткени бул стилдерди башкарууну кыйындатат.