Порядок исходного кода
Если два объявления влияют на один и тот же элемент, имеют одинаковую важность и одинаковую специфичность, то окончательное решение определяет порядок исходного кода. Объявление, которое появляется позже в таблицах стилей будет выигрывать у тех, которые встречаются раньше.
Если имеется единственная внешняя таблица стилей, то объявления в конце файла будут переопределять объявления, которые встречаются раньше в файле, если возникает конфликт. Конфликтующие объявления могут также возникать в различных таблицах стилей. В этом случае порядок, в котором присоединяются таблицы стилей, включаются или импортируются, управляют тем, какое объявление будет применяться. Давайте посмотрим на практический пример, как это работает.
Добавим новое правило в таблицу стилей в самом конце файла следующим образом:
p {
background-color: yellow;
color: black;
}
Сохраните и перезагрузите Web-страницу. Мы имеем теперь два правила, которые соответствуют всем параграфам. Они имеют одинаковую важность и одинаковую специфичность (так как селектор один и тот же), поэтому окончательным механизмом для различения будет порядок исходного кода.
Последнее правило определяет color:black и оно будет переопределять color:cyan из предыдущего правила.
Обратите внимание, что первый параграф вообще не затрагивается этим новым правилом. Хотя новое правило появляется последним, его селектор имеет меньшую специфичность, чем у #special. Это четко показывает, что специфичность имеет более высокий приоритет, чем порядок исходного кода.
Заключение
Наследование и каскадирование являются фундаментальными концепциями, которые должен понимать каждый Web-дизайнер.
Наследование позволяет объявлять свойства на высокоуровневых элементах и разрешает этим свойствам распространяться вниз на все элементы потомки. Только некоторые свойства наследуются по умолчанию, но наследование можно реализовать принудительно с помощью ключевого слова inherit.
Каскадирование разрешает все конфликты, когда несколько объявлений влияют на данный элемент. Важные объявления будут переопределять менее важные. Среди объявлений с равной важностью специфичность правила управляет тем, какое из них будет применяться. И если все остальное будет совпадать, то порядок исходного кода определяет окончательный выбор.
Контрольные вопросы
Наследуется ли свойство width? Подумайте сначала об этом - будет ли это иметь смысл? - затем посмотрите правильный ответ в спецификации CSS (http://www.w3.org/TR/CSS21/).
Если добавить !important в объявление color:black в последнем правиле в нашем примере таблицы стилей, будет ли это как-то влиять на цвет текста в первом, "специальном" параграфе?
Какой селектор более специфический, "#special" или "html>head+body>h1+p"?
Как должна выглядеть таблица стилей пользователя, чтобы наш тестовый документ выводился черным шрифтом Comic Sans MS на белом фоне, независимо от таблицы стилей автора?
Об авторе
Томми Олссон является прагматичным пропагандистом стандартов Web и доступности, который живет в малонаселенной области центральной Швеции. Он написал свой первый документ HTML в 1993 г. и является в настоящее время техническим Web-мастером для правительственного агентства Швеции.
Он написал пока одну книгу - Полный справочник по CSS (совместно с Полем О'Брайеном) - и поддерживает крайне нерегулярно блог с названием Кукушка-аутист (http://www.autisticcuckoo.net/).