Перевод статьи Николаса Галлахера «CSS: the cascade, specificity, and inheritance», переводчик — heljoshin
Каскад учитывает такие правила как: значимость, происхождение, специфичность и очередность источников устанавливающих стиль. Данный механизм присваивает приоритет каждому правилу. Когда несколько правил применяются к данному элементу, то правило с наибольшей значимостью станет приоритетным. Результатом является четкое определение роли данного элемента или сочетания элементов.
Браузеры применяют следующую логику при сортировке:
Специфичность рассчитывается своим собственным способом, базируясь на значимости 4 различных категорий. Например, в CCS2 для представления этих категорий использовались буквы a, b, c, и d, где каждая по умолчанию имела значимость равную 0.
Например, селектор #id .class[href] element:hover содержит:
Наследование — это процесс, при котором элементы наследуют значения свойств от своих предков в дереве DOM. Некоторые свойства, например, color, автоматически наследуется дочерним элементом. Каждое свойство определяет, будет ли оно автоматически унаследовано.
Значение inherit может быть задано для любого элемента, что заставит последний наследовать значение свойства родительского элемента, даже если свойство обычно не наследуется.
Декларация !important имеет больший приоритет, чем обычные декларации (см. ранее описанную логику сортировки каскада), даже чем декларации, содержащиеся в атрибуте style.
Адрес оригинала http://css-live.ru/articles/css-kaskad-specifika-i-nasledovanie.html
CSS: каскад, специфичность и наследование
Краткая статья, содержащая основные понятия о каскаде, специфичности и наследовании в CSS.Что такое каскад?
Каскад — это механизм, определяющий какие стили должны быть применены к данному элементу, основываясь на правилах, полученных из различных источников.Каскад учитывает такие правила как: значимость, происхождение, специфичность и очередность источников устанавливающих стиль. Данный механизм присваивает приоритет каждому правилу. Когда несколько правил применяются к данному элементу, то правило с наибольшей значимостью станет приоритетным. Результатом является четкое определение роли данного элемента или сочетания элементов.
Браузеры применяют следующую логику при сортировке:
- Найти все декларации, применяющиеся к данному элементу или группе элементов, и относящиеся к определенному типу.
- Сортировать декларации в соответствии с их приоритетом (обычный или
важный) и происхождением (автор, пользователь или пользовательский
агент). По нисходящей приоритетности:
- пользовательская декларации типа !important
- авторские декларация типа !important
- обычные авторские декларации
- обычные пользовательские декларации
- декларации пользовательского агента
- Если декларации обладают одинаковым приоритетом и источником, то следует сортировать их по специфичности селектора.
- Наконец, если декларации обладают одинаковым приоритетом, источником и специфичностью, то сортировать их следует по порядку положения в таблице стилей – последний элемент в списке имеет самый высокий приоритет.
Что такое специфичность?
Специфичность — это метод разрешения конфликтов в пределах каскада.Специфичность рассчитывается своим собственным способом, базируясь на значимости 4 различных категорий. Например, в CCS2 для представления этих категорий использовались буквы a, b, c, и d, где каждая по умолчанию имела значимость равную 0.
- a равняется 1, если декларация указана в атрибуте стиля HTML ("инлайн-стили"), а не в селекторе, при помощи CSS-правила.
- b равен количеству атрибутов ID в селекторе
- c равен количеству других атрибутов и псевдо-классов в селекторе
- d равен количеству элементов и псевдо-элементов в селекторе
Например, селектор #id .class[href] element:hover содержит:
- 1 ID (b равен 1)
- 1 класс, 1 селектор атрибута, и 1 псевдо-класс (c равен 3)
- 1 элемент (d равен 1)
Что такое наследование?
Наследование отличается от каскада и включает в себя дерево DOM.Наследование — это процесс, при котором элементы наследуют значения свойств от своих предков в дереве DOM. Некоторые свойства, например, color, автоматически наследуется дочерним элементом. Каждое свойство определяет, будет ли оно автоматически унаследовано.
Значение inherit может быть задано для любого элемента, что заставит последний наследовать значение свойства родительского элемента, даже если свойство обычно не наследуется.
О значении !important
Написанное выше должно сделать очевидным тот факт, что «!important» отдельное понятие применительно к специфичности, которое никак не влияет на специфичность селектора правила.Декларация !important имеет больший приоритет, чем обычные декларации (см. ранее описанную логику сортировки каскада), даже чем декларации, содержащиеся в атрибуте style.
Адрес оригинала http://css-live.ru/articles/css-kaskad-specifika-i-nasledovanie.html
Комментариев нет:
Отправить комментарий