Вы здесь

Специфичность свойств

Если у вас есть два (или более) конфликтующих правила CSS, относящихся к одному и тому же элементу, то для определения более приоритетного, браузеры используют определенные критерии отбора.

Вникание в эти критерии отбора может показаться не таким уж и важным делом. Да и в большинстве случаев никакие конфликты вам не грозят. Однако, чем объемнее и сложнее файлы стилей, или чем их больше, тем более велика вероятность возникновения подобных конфликтов.

Если есть несколько одинаковых CSS селекторов, то селектор, декларированный позднее других, имеет более высокий приоритет. Например, если у вас есть следующая декларация:

p {
   color: red;
}

p {
   color: blue;
}

то параграф p будет синего цвета, так как это правило декларировано последним.

Однако намеренно вы вряд ли будете декларировать одинаковые селекторы с конфликтующими правилами (потому что в этом нет никакого смысла). Тем не менее, законная территория конфликтов – это вложенные селекторы. Например, возьмем следующий пример:

div p {
   color: red;
}

p {
   color: blue;
}

Может показаться, что элементы p внутри элемента div будут окрашены в синий цвет, так как декларация цвета для элементов p появляется последней. Но на самом деле такие элементы будут красного цвет в соответствии с правилом первого селектора. Это происходит из-за того, что чем специфичнее селектор, тем больший приоритет он имеет.

Реальная специфичность группы вложенных селекторов определяется на основании некоторых вычислений. По существу, каждому селектору идентификатора ("#имя") присваивается значение 100, каждому селектору класса (".имя") – значение 10 и каждому селектору имени ("имя") – значение 1. Затем происходит сложение значений вложенных селекторов.

Таким образом, если бы все эти селекторы были бы определены, то div p.tree (со специфичностью 12) перекрыл бы селектор div p (со специфичностью 2), а селектор body #baobab .alternative p перекрыл бы всех их не зависимо от порядка декларирования.