Каскадность в CSS

Краткий конспект по книге: Кит Грант "СSS для профи".

Каскадность - набор правил, который определяет, какое объявление будет выполняться при их конфликте.

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

<p class="example" id="example>Hello</p>

#example {
  color: red;
 }
 
.example {
  color: blue;
 }
 
p {
  color: black;
 }
  

Для определения приоритета учитываются три показателя:

• источник стилей;
• специфичность селекторов;
• исходный порядок.

Источник стилей

По убыванию приоритета:

Важные авторские стили - созданные вами, помеченные аннотацией !important.

Авторские стили - созданные вами таблицы.

Браузерные стили - стили браузера по умолчанию.

Специфичность селекторов

По убыванию приоритета:

• селектор с идентификаторами. Чем большее идентификаторов, тем более специфичен селектор.
• селектор с классами. Чем больше классов, тем более специфичен селектор.
• селектор с тегами. Чем больше тегов, тем более специфичен селектор.

В итоге, если селектор имеет хотя бы один идентификатор, он будет более специфичен, чем селектор с несколькими классами.

Для удобства специфичность выражают в численной форме:

1, 2, 1

число идентификаторов, классов, тегов

Например:

#id1 #id2 {}           -   2, 0, 0   - самый специфичный

#id1 .class1 .class2{} -   1, 2, 0

.class1 .class2 p{}    -   0, 2, 1  

html body header p     -   0, 0, 4

Но правило с пометкой !important обладает самой высокой специфичностью!

Исходный порядок

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