Представим что существует два или более конфликтующих правила CSS, относящихся к одному и тому же элементу, то для определения более приоритетного, браузеры используют определенные критерии отбора.
Например если есть несколько одинаковых CSS селекторов, то селектор, декларированный позднее других, имеет более высокий приоритет:
Например если есть несколько одинаковых CSS селекторов, то селектор, декларированный позднее других, имеет более высокий приоритет:
p {
color: red;
}
p {
color: blue;
}В данном случае параграф будет синего цвета, так как это правило декларировано последним.
Декларировать одинаковые селекторы с конфликтующими правилами смысла нету. Тем не менее, законная территория конфликтов – это вложенные селекторы. Например, возьмем следующий пример:
Декларировать одинаковые селекторы с конфликтующими правилами смысла нету. Тем не менее, законная территория конфликтов – это вложенные селекторы. Например, возьмем следующий пример:
div p {
color: red;
}
p {
color: blue;
}В данном примере элементы <p> внутри элемента <div> должны быть окрашены в синий цвет, так как декларация цвета для элементов <p> появляется последней. Но, такие элементы будут окрашены в красный цвет в соответствии с правилом первого селектора. Это происходит из-за того, что чем специфичнее селектор, тем больший приоритет он имеет.
В статье «Каскадирование в CSS» я рассказывал что каждому селектору идентификатора присваивается значение 100, каждому селектору класса – значение 10 и каждому HTML селектору – значение 1. Затем происходит сложение значений вложенных селекторов:
Таким образом, если бы все эти селекторы были бы определены, то div p.doo (со специфичностью 12) перекрыл бы селектор div p (со специфичностью 2), а селектор body #primer .black 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 перекрыл бы всех их не зависимо от порядка декларирования.