Порядок исполнения

Question

У меня довольно большая страница, содержащая множество css и html. Страница разделена на регионы. Где-то устанавливаются основы для каждого региона (например, цвет текста, цвет ссылки и т. Д.).

Это делается в начале файла CSS. Однако у вас есть возможность настроить внешний вид модулей внутри региона. Поэтому рассмотрим тот факт, что на боковой панели есть класс .right-zone. Я разместил там модуль .navigation. Как только я настроил .navigation-module (через YUI), настраиваемый CSS добавляется в стандартный файл CSS и сохраняется.

Я бы предположил, что CSS интерпретируется сверху донизу.

.right-zone a { color: #ff0000; } 

Является базой документа. Таким образом, после настройки становится:

.right-zone a { color: #ff0000; } 
.navigation-module a { color: #0000ff; } 

Итак, представьте структуру документа:

[...] 
<div class="right-zone"> 
    <div class="navigation-module"> 
    <a href="http://www.stackoverflow.com/">foobar link</a> 
    </div> 
</div> 

Я могу только предположить, что окончательный цвет для ссылки будет # 0000FF - так как это последнее заявление в файл CSS. По какой-то причине он не делает этого на моем сайте.

«Общий» CSS определен в строке 335 - определение для навигационного модуля находится в строке 409, и все же ссылка по-прежнему окрашена в красный цвет вместо синего.

Firebug показывает красный цвет как окончательно примененный стиль и имеет сквозной удар по синему. Есть идеи, почему это происходит?

Answer 1

Ваш пример дает мне синюю ссылку, как и должно быть. Я предполагаю, что ваши настоящие селектор CSS более сложны, а первый более конкретный, чем второй.

Более позднее правило только переопределяет более раннее, если оно имеет одинаковую или большую специфичность. Например, .navigation-module a не будет переопределять правило #right-zone a или .right-zone div a.

Answer 2

Это каскадирование. Таким образом, более низкое правило имеет приоритет.

// this would work as desired... 
.right-zone a { color: #ff0000; } 
.right-zone .navigation-module a { color: #0000ff; } 

Альтернативно, вы можете использовать важные для преодоления приоритета.

.right-zone a { color: #ff0000; } 
.navigation-module a { color: #0000ff !important; } 

Надеюсь, это поможет!

Answer 3

Это связано также с так называемой спецификацией CSS (как Фрэнки коснулся немного). См CSS-Tricks on Specificity

В основном:

[any selector] .navigation-module a { color: #0000ff; } 

бы сделать его более "конкретным" и, следовательно, переопределить другой стиль. Также обратите внимание, что да будет определено последнее определение с той же специфичностью.