Есть три субъекта, которые могут определять таблицы стилей для оформления web-страниц.

1. Разработчик web-страницы. Он помещает стили либо в саму страницу либо в подгружаемые файлы css-стилей.
2. Пользователь (он же посетитель web-страницы). Он может создать и использовать таблицу стилей для конкретного документа (если браузер поддерживает такую возможность).
3. Браузер. В соответствии со спецификацией, браузеры должны сначала применить к web-странице свою таблицу css-стилей, используемую по умолчанию, а потом применять остальные таблицы стилей (которые могут переопределять предыдущие).

Области действия таблиц любого из трех субъектов, могут пересекаться (конфликтовать). Например в каждой таблице может существовать правило, определяющее внешний вид текста для абзаца. В этом случае выбор приоритетного CSS-правила осуществляется в соответствии с принципами каскадирования. При наличии нескольких правил для одного и того же элемента преимущество имеет правило с наибольшим приоритетом.

По умолчанию правила в таблицах стилей, созданных разработчиками страницы, имеют больший приоритет, чем правила, созданные пользователем. И все правила разработчика и пользователя имеют больший приоритет, чем правила в таблице стилей браузера. Таким образом, наименьший приоритет имеет таблица css-стилей браузера, затем идет таблица стилей пользователя, и самой приоритетной является таблица стилей разработчика.

Этот порядок можно просто изменить в настройках браузера (если он это позволяет) или же, не меняя его, указать директиву !important для какого-то отдельного правила. И тогда правило с такой директивой становится более приоритетным.

Если, например, в таблице пользователя написано:

p { color: green !important }

а в таблице разработчика написано:

p { color: blue }

то в результате цвет текста параграфа будет иметь зеленый цвет.

Когда применяется директива !important, правила каскадирования имеют следующий вид (вверху - самый высокий приоритет, внизу - самый низкий):

• Пользовательские стили, отмеченные флажком !important
• Авторские стили, отмеченные флажком !important
• Авторские стили
• Пользовательские стили
• Стили браузера

Но правила которые происходят из одного источника так же могут конфликтовать. И здесь вступает в действие такой закон.

Правила с более специфичными селекторами переопределяют правила с менее специфичными.

Рассмотрим ряд правил специфичности (вытекающий из закона).

• Если одно из конфликтующих правил находится в таблице css, а другое прикреплено через атрибут style в документе или через javaScript, то наиболее приоритетным является правило, заданное через атрибут style. Если же конфликтующие правила находятся во внешних таблицах css-стилей, то действует следующее правило.
• Большим приоритетом обладает правило, в котором применяется больше идентификаторов элементов (значений атрибута id, заданных символом #). Например правило с селектором #menu обладает большим приоритетом, чем правило, которое применяется к тому же элементу, но через селектор ul. Если число идентификаторов одинаково, или их нет, то действует следующее правило.
• Большим приоритетом обладает правило, в селекторе которого содержится больше названий классов CSS (значений, перечисленных в атрибуте class, заданных через символ точка), или псевдоклассов. Если количество одинаково, то используем следующее правило.
• Большим приоритетом обладает правило, в селекторе которого находится больше различных имен тегов. Например правило CSS с селектором ul.menu имеет больший приоритет, чем правило .menu, но меньший, чем div ul.menu (хотя конечно помещать элемент ul в отдельный div вряд ли есть необходимость. Это просто пример)
• Если все предыдущие правила говорят о том, что конфликтующие css-правила имеют одинаковый приоритет, то приоритет выше у того правила, которое находится ниже (тоесть определено позже) в документе или в файле css-стилей.

Вот и все. Если упущено что-то существенное, то пишите - всем будет интересно узнать. Если сами не хотите пропустить что-нибудь интересное, то милости просим - подписывайтесь на email-рассылку или на rss-ленту.