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

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

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

p {
   color: red;
}

p {
   color: blue;
}

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

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

div p {
   color: red;
}

p {
   color: blue;
}

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

В статье «Каскадирование в CSS» я рассказывал что каждому селектору идентификатора присваивается значение 100, каждому селектору класса – значение 10 и каждому HTML селектору – значение 1. Затем происходит сложение значений вложенных селекторов:

• p – специфичность 1 (1 селектор имени);
• div p — специфичность 2 (2 селектора имени; 1+1);
• .doo – специфичность 10 (1 селектор класса);
• div p.doo – специфичность 12 (2 селектора имени и селектор класса; 1+1+10);
• #primer – специфичность 100 (1 селектор идентификатора);
• body #primer .black p – специфичность 112 (селектор имени, селектор идентификатора, селектор класса, селектор имени; 1+100+10+1).

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