Простой обзор каскадов
Согласно упрощенной версии объяснения принципов работы каскада, вам следует запомнить три правила.
Правила 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 станет красным. Наследуемый стиль имеет низкий приоритет перед явно указанным стилем.