Таблица приоритетов CSS-селекторов

СелекторПриоритетПример
Универсальный (*) 0 * {...}
Псевдоэлемент | Элемент 1 ::first-letter {...} | p {...}
Атрибут | Класс | Псевдокласс 10 [href] {...} | class {...} | :hover {...}
Идентификатор 100 #id {...}
Встроенный стиль 1000 <p style="..."></p>

Специфичность — другое название приоритетности.

Примечания

Если элемент наследует какое-то свойство от двух родителей, то будет использоваться свойство от ближайшего родителя, не учитывая приоритетность дальнего.


При одинаковом количестве баллов приоритета применяется стиль, который описан в коде ниже.

Если поменять местами span {color: green;} и span {color: red;}, то текст отобразится в зелёном цвете.