Возникающие конфликты
Оригинал: What happens when conflicts occur?
Существуют ситуации, когда для одного элемента создаются правила несколько раз. При этом, если описываются одни и те же свойства
несколько раз, то могут возникнуть конфликты между ними. Когда такие конфликты возникают, то используется то правило, у которого больший приоритет.
Как же определяется приоритет? В качестве примера будет использоватся элемент
<h2> с вымышленными стилями.
1. Найти все определения свойства для элемента
После проверки всех возможных стилей для элемента
<h2>,
мы можем показать все стили используемые для этого элемента:
Браузерные стили могут включать в себя следующие свойства:
h2 {
font-size:1.5em;
margin:.83em 0;
color:black ;
}
Пользовательские стили могут включать в себя следующие:
h2 {
color:brown !important;
}
Авторские стили могут включать в себя следующие:
h2 {
color:green ;
font-size:1.2em ;
padding:10px ;
}
h2#main {
color:red ;
}
h2.navigation {
color:blue ;
}
2. Сортировка свойств по приоритету
Указанные выше свойства дальше сортируются по приоритету и происхождениию. Для обычных свойств авторские стили перекрывают
стили браузера и пользователя. Если же в пользовательских стилях используется !important для свойства, то это свойство перекроет авторские стили и стили браузера.
Для элементов
<h2>, которые используются без классов и id стили будут такими:
font-size:1.2em ;
margin:.83em 0 ;
padding:10px ;
color:green ;
Пользователи, которые установили
!important для своих стилей, будут видеть элементы
<h2> с такими стилями:
font-size:1.2em ;
margin:.83em 0 ;
padding:10px ;
color:brown ;
2. Сортировка элементов согласно специфике
Даже если стили для элемента <h2> уже остортированы, все еще могут возникать
конфликты. Что же происходит с элементами <h2>, для которых применялся id #main ?
Согласно специфике использования селекторов более конкретные описания перекрывают общие. Расчет перекрытия стилей основывается на следующих правилах:
- Подсчет количества id для селектора
- Подсчет количества селекторов в селекторе
- Подсчет количества элементов в селекторе
Представим эти 3 расчета в письменном виде:
h2 {
font-size:1.5em ;
margin:.83em 0 ;
color:black ;
}
0-0-1 > спецификация = 1
h2 {
color:brown !important;
}
0-0-1 > спецификация = 1
h2 {
color:green ;
font-size:1.2em ;
padding:10px ;
}
0-0-1 > спецификация = 1
h2#main {
color:red ;
}
1-0-1 > спецификация = 101
h2.navigation {
color:blue ;
}
0-1-1 > спецификация = 11
Исходя из этого можно сделать вывод, что стили описанные для h2#main имеют наибольший приоритет, затем идут стили описанные для h2.navigation
Для пользователей, у которых не будут затронуты пользовательские стили заголовков, h2#main будут такие:
Заголовки с классом .navigation будут:
Если будут пересекатся заголовки описанные для #main и .navigation, то будут применены стили:
3. Сортировка согласно спецификации
Если два правила описанные в css имеют одинаковый приоритет, то использоваться будут те, которые описаные ниже в файле стилей.
h2 {
color:blue ;
}
h2 {
color:green ;
}
В этом случае использоваться будет второе правило, так как оно описано ниже в файле стилей.
Добавить комментарий
