Undsoft.com

Возможно, вам, как и мне, периодически приходилось сталкиваться с несколько непонятным поведением свойств CSS — иногда одна стилевая запись, вопреки желаниям автора, оказывает большее влияние, чем другая. Поэтому полезно знать принцип, по которому браузеры расчитывают приоритет селекторов в CSS.

Кто круче?

.classname .classname2 div

или

Specificity

Разобраться в этом, поможет такая табличка.

Приоритет (или специфичность, как это правильно называть) расчитывается следующим образом:

• Если это инлайн стиль (style="color: red;"), A начисляется единица.
• За каждый идентификатор в селекторе В начисляется единица.
• За каждый класс, псевдокласс (:hover) и другой атрибут (например, [type=text] для input) начисляется единица С.
• Тоже самое происходит с элементами html и псевдоэлементами (:before) для D.

Потом все эти цифры объединяются вместе, и у кого больше, тот и победил

Примеры

а Просто один html элемент. А=0, B=0, C=0, D=1
а.big Большая специфичность за счет класса. А=0, B=0, C=1, D=1
a:hover Элемент и атрибут. Специфичность такая же, играет роль только порядок записей. А=0, B=0, C=1, D=1
.classname .classname2 div Класс в классе и 1 элемент. А=0, B=0, C=2, D=1.
#id_name Идентификатор побеждает всех. А=0, B=1, C=0, D=0.
style="" Инлайн-запись побеждает даже идентификатор. А=1, B=0, C=0, D=0.

Следует понимать, что цифры не просто конкатенируются:

0 1 0 0 все равно круче чем 0 0 10 0, потому что учитывается каждая отдельная буква.

Правила

На основании этой таблички легко разработать следующие простые правила:

1. Применяйте самые общие стили к html элементам, менее общие — к классам и атрибутам, и совсем уникальные — к идентификаторам.
2. Инлайн стиль победит всех. Используйте осторожно.
3. В целом, чем более сложный и «глубокий» селектор, тем больше у него приоритет.
4. Спецификации предусматривают, что id следует применять к одиночному элементу html, а классы — к повторяющимся.
5. Однако к глобальным элементам, таким как какой-нибудь wrapper div лучше применять класс, а не идентификатор, даже если он всего один, потому что потом стиль элемента можно будет легко изменить программно, добавив еще один класс.