Каскад

До сих пор в данной главе мы обходили один весьма важный вопрос: что происходит, когда к одному элементу применяются два правила с равной специфичностью? Как броузер разрешает этот конфликт? Например, имеются следующие правила:

h1 {color: red;}
h1 {color: blue;}

Какое из них победит? Специфичность обоих равна 0,0,0,1, у них равные шансы, и они оба должны быть применены. Это просто невозможно, потому что элемент не может быть и красным, и синим одновременно. Но каким он будет? Наконец-то название «Каскадные таблицы стилей» обретает некоторый смысл. CSS основывается на методе каскадирования стилей, реализация которого стала возможной благодаря сочетанию наследования и специфичности. Правила каскадирования для CSS2.1 предельно просты:

1. Найти все правила, содержащие селектор, сопоставляемый с данным элементом.

2. Провести сортировку согласно явной приоритетности всех применяемых к элементу объявлений. Правилам, отмеченным как !important, присваивается более высокий приоритет, чем остальным. Также все применяемые к данному элементу объявления сортируются согласно их источнику. Существует три возможных источника правил: автор, читатель и агент пользователя.


В общем случае стили автора приоритетней стилей читателя. Но стили читателя, отмеченные как !important, сильнее, чем все остальные стили, включая и те стили автора, которые отмечены как !important. И стили автора, и стили читателя замещают применяемые по умолчанию стили агента пользователя.

3. Провести сортировку всех объявлений, применяемых к элементу, согласно их специфичности. Элементы с более высокой специфичностью имеют больший приоритет по сравнению с теми, специфичность которых ниже.

4. Провести сортировку всех объявлений, применяемых к элементу, в соответствии с очередностью расположения. Чем позже объявление появляется в таблице стилей или документе, тем больший приоритет ему присваивается. Считается, что объявления, находящиеся в импортированных таблицах стилей, располагаются перед всеми объявлениями импортировавшей их таблицы стилей.

Чтобы полностью разобраться в том, как все это работает, рассмотрим три примера, иллюстрирующих последние три из четырех правил каскадирования.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Важность
Наследование
Объявления и специфичность
Сортировка по порядку расположения
Сортировка по приоритетности и источнику

Вернуться в раздел: CSS / 3. Структура и каскад