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

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

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

• Если это инлайн стиль (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 лучше применять класс, а не идентификатор, даже если он всего один, потому что потом стиль элемента можно будет легко изменить программно, добавив еще один класс.