CSS: приоритет выполнения правил

Довольно часто один и тот же элемент может попадать под действие сразу нескольких правил CSS. Для определения какое именно из них следует выполнять можно пользоваться следующим алгоритмом.

Каждому правилу можно назначить некоторый идентификатор, состоящий из восьми чисел: A.B.C.D.a.b.c.d Из двух идентификаторов бОльшим считается тот, который имеет бОльшее число A. Если эти числа равны у двух идентификаторов, смещаемся вправо. Из двух правил применяется то, которое имеет бОльший идентификатор. Если идентификаторы равны, применяется то правило, которое объявлено последним.

Разбираем селектор на составные части (простые селекторы). Имеется 7 типов таких составных частей:

1. Универсальный селектор не весит ничего. Поэтому правило * {} будет применяться в последнюю очередь, а из двух правил div {} и div * {} применится то, которое объявили последним.
2. Каждый селектор типа увеличивает число d на единицу.
3. Каждый селектор класса увеличивает число с на единицу. Мультикласс дробится на отдельные элементы, каждый из которых увеличивает число с на единицу.
4. Каждый селектор id увеличивает число b на единицу.
5, 6, 7 - Каждый селектор атрибута, псевдокласса или псевдоэлемента считается селектором клсса и увеличивает число c на единицу.

Инлайновый стиль (включенный непосредственно в качестве атрибута тега) увеличивает на единицу число a. При этом селектор по атрибуту style ([style]) увеличивает на единицу число с, а следовательно "перебивается" инлайновым правилом:

<style>
  [style] { color: green }
</style>
...
<p style="color: red"> <!-- предпочтение отдаётся инлайновому правилу -->
...

Если блок определений правила включает ключевое слово !important, то на единицу увеличиваются числа A, B, C, D (в зависимости от типа селектора по перечисленным выше правилам). Поэтому если бы в предыдущем примере определение стиля выглядело так:

[style] { color: green !important; },

то предпочтение отдалось бы уже ему: 0.0.1.0.0.0.0.0 > 0.0.0.0.1.0.0.0

Из этих правил можно сделать вывод, что наибольшим приоритетом обладает инлайновое стилевое правило тега с модификатором !important (1.0.0.0.0.0.0.0), а наименьшим - обычное правило тега (0.0.0.0.0.0.0.1), а если быть более точным - универсальный селектор (0.0.0.0.0.0.0.0)