Вы когда-нибудь попадали в ситуацию, когда попытки применить новый стиль ни к чему не приводили? Казалось, страница игнорирует ваш CSS код, и вы не понимаете почему? Возможно, вы нашли выход, используя !important или атрибут элемента style?

Понимание приоритета примененных стилей позволит вам лучше организовать таблицы CSS.

Специфичность

Представьте, вы написали HTML код:

<p class="bio">Lorem ipsum…</p>

Затем добавили 2 правила:

p {font-size: 12px;}
p.bio {font-size: 14px;}

Каков будет размер шрифта? Думаю, вы предположите, что 14px, потому что вторая строчка уточняет первую. Но иногда пример может быть не таким очевидным.

Вы видите строчки HTML и CSS:

<div id="sidebar">
	<p class="bio">Lorem ipsum…</p>
</div>

div p.bio {font-size: 14px;}
#sidebar p {font-size: 12px;}

На первый взгляд, строчка div p.bio кажется более специфичной, но размер шрифта будет 12px.

Специфичность вычисляется в следующем порядке (от меньшему к большему)

1. элемент, псевдо-элемент
2. класс, псевдо-класс, атрибут
3. идентификатор
4. атрибут style HTML разметки

Таким образом, в нашем примере идентификатор #sidebar уточняет стиль в большей степени, чем класс p.bio.

Свойство с !important переписывает стандартные правила, поэтому CSS:

div p.bio {font-size: 14px !important;}
#sidebar p {font-size: 12px;}

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

Наследование

Элементы могут наследовать стили от элемента-контейнера, в котором они располагаются. Если вы установите красный цвет для body, все элементы на странице будут по умолчанию красными.

Однако не все стили наследуются. К не наследуемым, например, относятся поля и отступы. Если установить их для блока div, абзацы p внутри него будут иметь свои установленные поля и отступы. Но вы можете явно установить наследство стилей:

p {margin: inherit; padding: inherit;}

Заключение

Браузер вычисляет стили по следующему алгоритму.

1. Поиск всех стилей, применимых к элементу.
2. Сортировка по весу, определение стандартных. Стили по умолчанию (стили браузера, общие пользовательские стили), стили, помеченные !important как наиболее важные.
3. Специфичность
4. В случае равенства стилей, применяется стиль, записанный последним. CSS код, встроенный в HTML, всегда выполняется после подключенных таблиц стилей.

Для решения проблемы кроссбраузерности вы можете сбрасывать стандартные стили браузера, используя готовые решения Eric Meyer’s CSS Reset или Yahoo’s YUI Reset CSS.

Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade