HTML\CSS → Порядок определения классов в CSS

Порядок определения классов в CSS важен. Механизм определения приоритетов предусматривает зависимость от порядка определения классов в таблице стилей:

<p class="red green">red or green? red!</p>
...
.green { color: green; }
.red { color: red; }

Селекторы одинакового типа, в данном случае более высоким приоритетом обладает то правило, которое расположено ниже в коде.

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

<p class="red green">red or green? now green!</p>
p.green { color:green; }
.red { color:red; }