Специфічність селекторів CSS
CSS селектор специфічності визначає, який стиль буде застосовано, коли кілька селекторів відповідають одному й тому ж елементу. Чим вища специфічність, тим вища пріоритетність стилю.
Формула специфічності
Специфічність розраховується на основі трьох категорій
Важливо: Класична система підрахунку специфічності не включає !important, оскільки це окрема концепція, яка переважає все. Зазвичай ми говоримо про три категорії, але для повноти !important можна згадати як особливий випадок:
- !important переважає всі нормальні стилі (окремо від механізму специфічності)
- Інлайн стилі (вбудовані стилі, наприклад,
style="color: red;") мають найвищий пріоритет. - ID надають вагу 100 балів кожен.
- Класи, атрибути та псевдокласи додають по 10 балів кожен.
- Теги та псевдоелементи додають по 1 балу кожен.
Приклади специфічності
| Селектор | Специфічність | Пояснення |
|---|---|---|
* | 0, 0, 0 | Універсальний селектор, мінімальна вага. |
p | 0, 0, 1 | Один тег (1 бал). |
.class | 0, 1, 0 | Один клас (10 балів). |
#id | 1, 0, 0 | Один ідентифікатор (100 балів). |
div.class | 0, 1, 1 | Один тег (1) та один клас (10). |
#id .class p | 1, 1, 1 | Один ID (100), один клас (10), один тег (1). |
style="color: red;" | Інлайн стиль | Максимальна специфічність. |
Як працює специфічність
Коли стилі з різних селекторів застосовуються до елемента, використовується селектор з більшою специфічністю. Якщо специфічність однакова, застосовується стиль, який з'являється пізніше в коді (правило каскаду).
Приклад
<div id="example" class="box">
Example text
</div>/* Стилі */
div { color: black; } /* 0, 0, 1 */
.box { color: blue; } /* 0, 1, 0 */
#example { color: red; } /* 1, 0, 0 */
/* Остаточний стиль: колір тексту буде червоним (#example). */Порада:
Уникайте надмірного використання селекторів ID. Це робить код менш гнучким і ускладнює переважання стилів.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.