Приоритет в CSS

Элемент HTML может быть целью нескольких правил CSS. Давайте воспользуемся простым абзацем в качестве примера:

<p class="message" id="introduction">
  MarkSheet — это бесплатное руководство по HTML и CSS.
</p>

Мы можем изменить этот абзац просто используя имя тега:

p { color: blue; }

Или же можем воспользоваться именем класса:

.message { color: green; }

Или можем использовать идентификатор:

#introduction { color: red; }

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

В нашем примере абзац будет красным, потому что идентификатор более специфичен и, таким образом, более важен, чем другие селекторы.

Порядок правил CSS

Если в вашем CSS есть одинаковые селекторы, то последний из них будет иметь приоритет.

p { color: green; }
p { color: red; }
/* Абзац будет красным */

Вычисление 100

Есть один быстрый способ выяснить, насколько правило CSS «сильное», путём вычисления специфичности селекторов:

идентификаторы стоят 100;
классы стоят 10;
селекторы тега стоят 1.

Селектор с наивысшим «счётом» будет преобладать, независимо от порядка, в котором появляются правила CSS.

CSS

#introduction { color: red; }
.message { color: green; }
p { color: blue; }

HTML

<p class="message" id="introduction">
  MarkSheet — это бесплатное руководство по HTML и CSS.
</p>

Правило #introduction { color: red; } является более специфичным, чем другие, потому что идентификаторы должны быть уникальными по всей веб-странице, таким образом, может быть только один целевой элемент.

.message { color: green; } будет нацелен на любой HTML-элемент с атрибутом class="message" и, следовательно, менее специфичен. То же самое относится и к p { color: blue; }, который может предназначаться для любого абзаца.

Как избежать конфликтов

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

Чтобы избежать этого:

применяйте только классы: используйте .introduction вместо #introduction, даже если этот элемент появляется на вашей веб-странице только один раз;
избегайте применять несколько классов к одному элементу HTML: пишите не <p class="big red important">, а <p class="title">, который является семантически более описательным;
не используйте встроенные стили, такие как <div style="background: blue;">.