На выбор применяемого браузером стиля влияют четыре фактора: вес, источник, конкретность и порядок следования.

Вес определенного описания стиля можно определить с помощью ключевого слова !important, добавляемого после значения свойства. При этом свойство приобретает приоритетное значение над аналогичными свойствами, указанными в других правилах стиля, за исключением редких случаев. Применение ключевого свойства !important сильно усложняет процесс поддержки кода; кроме того, необходимость в его использовании возникает не слишком часто. Ввиду приведенных причин рекомендуется по возможности избегать его, как в примерах данной книги. Дополнительную информацию о данном ключевом слове можно найти в документации SitePoint CSS Reference

Существуют три возможных источника стилей – они могут быть определены браузером, разработчиком или пользователем. В данной книге нас интересуют таблицы стилей, написанные разработчиком веб-страницы, т. е. вами. Мы уже говорили, что у браузера есть своя внутренняя таблица стилей, определяющая оформление всех элементов по умолчанию, однако стили, написанные разработчиком, всегда имеют более высокий приоритет и переопределяют настройки по умолчанию. Кроме того, возможно применение пользовательской таблицы стилей – набора стилей, созданного пользователями, однако и они, за исключением редких случаев, переопределяются таблицей стилей разработчика. Источникам стилей посвящен целый раздел документации SitePoint CSS Reference

Помимо этого, влияние каскадирования на поведение стилей CSS зависит от степени конкретности свойств и порядка их следования.

Правило стиля с более конкретным селектором переопределяет стили, задаваемые правилом с более общим селектором. Рассмотрим этот механизм на практическом примере со следующим несложным HTML- кодом:

<div id="content">
   <p class="message">
   Это - важное сообщение.
   </p>
</div>

А теперь обратите внимание на правила стилей, применяемых к приведенной выше разметке:

p { color: #000000; }
.message { color: #CCCCCC; }
p.message { color: #0000FF; }
#content p.message { color: #FF0000; }

В данном примере действие всех четырех селекторов, задающих цвет шрифта, направлено на элемент p. Какой же цвет будет использован? Совершенно верно, красный (#FF0000). Селекторы p (любой элемент p) и .message (любой элемент класса message) имеют одинаковую степень значимости; приоритет селектора p.message (любой элемент p класса message) выше, но самым высоким приоритетом обладает селектор #content p.message (любой элемент p класса message, являющийся дочерним для элемента со значением content атрибута id).

Однако длину селекторов не стоит рассматривать как показатель степени конкретности. К примеру, селектор ID всегда будет иметь более высокий приоритет, чем селектор типа или класса. Чем сложнее используемые вами селекторы, тем труднее разобраться в степени их важности, при этом приведенные в данной книге примеры достаточно просты. Точную формулу измерения степени конкретности вы можете найти в документации SitePoint CSS Reference

Если, несмотря на вышеперечисленные факторы, остается несколько стилей, которые могут быть применены по отношению к одному и тому же элементу, в расчет принимается порядок следования правил – в этом случае будет использовано последнее из них. В приведенном выше примере степень значимости селекторов p и .message одинакова, поэтому при отсутствии иных регулирующих принципов используется правило стиля, записанное последним, – в данном случае с селектором .message. Так же дело обстоит и при объявлении в таблице стилей нескольких правил с одним и тем же селектором – например, .message. В этом случае будет применено правило, определенное вторым. В последующих главах мы увидим, что такой механизм работы можно эффективно использовать для достижения своих целей.