Як розраховується специфічність? Як виглядає формула специфічності?
Специфічність обчислюється як числова «вага» селектора, що складається з чотирьох розрядів. Браузер формує число за формулою:
javascript
[a, b, c, d]Де:
| Розряд | Що враховується | Приклади |
|---|---|---|
| a | inline-стилі | style="" |
| b | ID-селектори | #header |
| c | класи, атрибути, псевдокласи | .box, [type="text"], :hover |
| d | селектори тегів і псевдоелементи | div, p, ::after |
Як рахується
Селектор розбирається на частини, і кожна частина збільшує один з розрядів.
Наприклад:
| Селектор | Специфічність |
|---|---|
div | 0,0,0,1 |
.text | 0,0,1,0 |
#main | 0,1,0,0 |
header .menu li | 0,0,1,2 (1 клас + 2 теги) |
#main .menu li | 0,1,1,1 |
style="color:red" | 1,0,0,0 |
Як порівнюються
Порівняння відбувається розряд за розрядом зліва направо:
- спочатку порівнюється
a(inline) - якщо рівні,
b(id) - якщо рівні,
c(класи) - якщо рівні,
d(теги)
Застосовується те правило, у якого більше число в першому розряді, що відрізняється.
Важливі винятки
!importantне бере участі у формулі, але перебиває все, крім іншого!important*(універсальний селектор) не додає ваги- комбінатори (
>,+,~, пробіл) також не впливають на вагу
Підсумок формули
Специфічність = [a, b, c, d], де:
a: inlineb: IDc: класи, атрибути, псевдокласиd: теги і псевдоелементи
Ця формула визначає, яке правило переможе при конфлікті стилів.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.