Простой обзор каскадов

Согласно упрощенной версии объяснения принципов работы каскада, вам следует запомнить три правила.

Правила 1. Селекторы с идентификаторами имеют приоритет перед селекторами с классами, которые, в свою очередь, приоритетнее селекторов только с тегами.

Правило 2. Если одно и то же свойство для одного тега указано в каскаде несколько раз, строчные стили имеют приоритет перед вложенными, которые, а свою очередь, приоритетнее прочих стилей. При этом правило 2 проигрывает правилу 1 - если селекторы более специфичны, они имеют более высокий приоритет.

Правило 3. Явно указанные стили имеют приоритет перед наследуемыми. Например, у нас есть код:

<div id="cascadedemo">
<р id="inheritancefact">Наследуемость имеет <em>низкий</em> приоритет в каскаде</р>
</div>

В этом случае правило:

html body div#cascadedemo p#inheritancefact {color:blue}

приводит к тому, что весь текст, включая низкий, отображается синим цветом, так как наследует цвет родительского тега р. После того как мы добавим следующее правило для em:

em {color:red}

текст внутри тега em станет красным. Наследуемый стиль имеет низкий приоритет перед явно указанным стилем.