Специфичность селектора - это показатель, определяющий приоритет применения CSS-правил к элементам на веб-странице. Специфичность селектора определяется на основе количества и типа селекторов, которые используются в CSS-правиле.
| Специфичность селектора | |
|---|---|
| Inline selector | 1000 |
| id | 100 |
| Class, Attribute, Pseudo-class | 10 |
| Element / Pseudo-element | 1 |
| Inline selector | id | Class, Attribute, Pseudo-class | Element / Pseudo-element | |
|---|---|---|---|---|
| Inline selecto | 1 | 0 | 0 | 0 |
| id | 0 | 1 | 0 | 0 |
| Class, Attribute, Pseudo-class | 0 | 0 | 1 | 0 |
| Element / Pseudo-element | 0 | 0 | 0 | 1 |
Каждый тип селектора имеет свой вес, который используется для вычисления общей специфичности селектора. Вес селектора вычисляется следующим образом:
- Для каждого типа селектора определяется его вес:
- Идентификаторный селектор (
#header): 100 - Селектор класса, селектор атрибута, селектор псевдокласса (
.red-text,[href="https://example.com"],:hover): 10 - Типовой селектор, селектор псевдоэлемента (
p,::first-line): 1 - Универсальный селектор (
*): 0
- Идентификаторный селектор (
- Для каждого селектора в CSS-правиле вычисляется его общий вес, который определяется суммой весов его типов селекторов.
- Если два или более селектора имеют одинаковый общий вес, то селектор, который был указан последним, будет иметь более высокий приоритет.
Например, в CSS-правиле #header .red-text и в CSS-правиле p.red-text первый селектор имеет общий вес 110 (100 для идентификаторного селектора и 10 для класса), а второй селектор имеет общий вес 11 (1 для типового селектора и 10 для класса). Поэтому первый селектор имеет более высокий приоритет и будет применяться к элементам с идентификатором header, которые имеют класс red-text.
Специфичность селектора важна для правильного выбора приоритета CSS-правил, особенно в случае конфликта между несколькими правилами.
Практическая задача
1. li //
2. #main.item //
3. h1 + [href = "test"] //
4. #test p //
5. li.item.main //
6. #test //
7. ul ol li.item //
8. ul li //
9. #test:not(.main) //
10. ul ol+li //
11. a:hover //
12. p::first-line //
13. h2 strong //
14. span.test ul li //1. li // 1
2. #main.item //110
3. h1 + [href = "test"] // 11
4. #test p // 101
5. li.item.main // 21
6. #test // 100
7. ul ol li.item // 13
8. ul li // 2
9. #test:not(.main) // 110
10. ul ol+li // 3
11. a:hover // 11
12. p::first-line // 2
13. h2 strong // 2
14. span.test ul li // 13