Таблица приоритетов CSS-селекторов
| Селектор | Приоритет | Пример |
|---|---|---|
| Универсальный (*) | 0 | * {...} |
| Псевдоэлемент | Элемент | 1 | ::first-letter {...} | p {...} |
| Атрибут | Класс | Псевдокласс | 10 | [href] {...} | class {...} | :hover {...} |
| Идентификатор | 100 | #id {...} |
| Встроенный стиль | 1000 | <p style="..."></p> |
Специфичность — другое название приоритетности.
Примечания
Если элемент наследует какое-то свойство от двух родителей, то будет использоваться свойство от ближайшего родителя, не учитывая приоритетность дальнего.
При одинаковом количестве баллов приоритета применяется стиль, который описан в коде ниже.
Если поменять местами span {color: green;} и span {color: red;}, то текст отобразится в зелёном цвете.