Шумо дар бораи махсусгардонии интихобкунандагони CSS…

Махсусият муайян мекунад афзалиятнокии қоидаҳои CSS дар ҳолати ихтилоф, вақте ки ба як унсур услубҳои гуногун татбиқ мешаванд. Он барои ҳар як интихобкунанда дар қоида ҳисоб карда мешавад.

Махсусият арзёбии рақамӣ мебошад, ки аз чор категория (A, B, C, D) иборат аст, ки ҳамчун 0,0,0,0 навишта мешавад. Ҳамон қадар ки рақам калонтар бошад, махсусият баландтар аст.

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

A (усул дар inline): Усулҳое, ки бо хусусияти style дар унсури HTML муайян карда шудаанд. Онҳо баландтарин махсусият доранд (масалан, 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 ҳамеша аз ҳар кадом маҷмӯи дигар интихобкунандагон баландтар аст, ба истиснои қоидаҳо бо рамзи !important.
Қоидаҳо бо рамзи !important дорои афзалияти баландтарин мебошанд, ҳатто нисбат ба inline-и. Истифодаи !important тавсия дода намешавад, ба хотири осонтар кардани ташхис.
Дар ҳолати баробарии махсусият, қоидае, ки охирин дар CSS-файл эълон шудааст, истифода мешавад.
Интихобкунандагони умуми (*) ва псевдокласс :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 чӣ медонед?