Здравствуйте, уважаемые читатели.
Думаю, начинающим верстальщикам приходилось сталкиваться с тем, что один селектор имеет больший «авторитет» чем другой, несмотря на то, что заданы они совершено по-разному.
Я хочу рассказать вам как заведомо просчитать “вес” в одном селекторе и исходя из этого наиболее верно его записать.
Итак, начнем.
Каскад или каскадирование – это алгоритм, который для каждого элемента и каждого свойства выбирает одно объявление из всех доступных.
На первой стадии каскада объявления сортируются в соответствии с их весом. Объявления с большим весом имеют приоритет над объявлениями с меньшим весом.
ВЕС 1 (наименьший) имеют объявления, заданные в таблице стилей браузера
ВЕС 2 имеют объявления, заданные в таблице стилей разработчика
ВЕС 3 (наибольший) имеют объявления, заданные в таблице стилей разработчика с ключевым словом !important
На второй стадии каскада учитывается специфичность селекторов. Специфичность – это числовая характеристика селектора, которая рассчитывается так:
Пусть А – количество селекторов по id в данном селекторе
Пусть B – количество селекторов по class, селекторов атрибутов и псевдоклассов в данном селекторе (кроме псевдокласса not())
Пусть C – количество типов элементов в данном селекторе
Специфичность это число, которое получается, если записать числа А, B, C одно за другим без пробелов. Объявления в блоках селекторов с большей специфичностью имеют приоритет над объявлениями в блоках селекторов с меньшей специфичностью.
Примеры:
* — универсальный селектор
A=0, B=0, C=0, Специфичность = 0
H1 — обыкновенный селектор по типу элемента
A=0, B=0, C=1, Специфичность = 1
#main p — селектор с комбинатором элемента потомка
A=1, B=0, C=1, Специфичность = 101
a.ext img[alt=”Пушкин”] — составной селектор с селектором атрибута
A=0, B=2 (один селектор по class и один селектор атрибута), C=2 (a и img), Специфичность 22
Th#logo
A=1, B=0, C=1, Специфичность = 101
Th[id=”logo”]
A=0, B=1, C=1, Специфичность = 11
Объявления, заданные с помощью атрибута style имеют больший приоритет, чем объявления в блоках селекторов.
Объявления, заданные не в таблице стилей (например, оформительские атрибуты HTML), имеют меньший приоритет по сравнению с объявлениями CSS.
Наконец, если сортировка по специфичности не помогает выделить перекрывающее объявление, каскад возвращает то объявление, которое идет последним среди конкурирующих объявлений в таблице стилей.
Надеюсь представленная информация поможет вам в будущем! Удачи!:)
Думаю, начинающим верстальщикам приходилось сталкиваться с тем, что один селектор имеет больший «авторитет» чем другой, несмотря на то, что заданы они совершено по-разному.
Я хочу рассказать вам как заведомо просчитать “вес” в одном селекторе и исходя из этого наиболее верно его записать.
Итак, начнем.
Каскад или каскадирование – это алгоритм, который для каждого элемента и каждого свойства выбирает одно объявление из всех доступных.
На первой стадии каскада объявления сортируются в соответствии с их весом. Объявления с большим весом имеют приоритет над объявлениями с меньшим весом.
ВЕС 1 (наименьший) имеют объявления, заданные в таблице стилей браузера
ВЕС 2 имеют объявления, заданные в таблице стилей разработчика
ВЕС 3 (наибольший) имеют объявления, заданные в таблице стилей разработчика с ключевым словом !important
На второй стадии каскада учитывается специфичность селекторов. Специфичность – это числовая характеристика селектора, которая рассчитывается так:
Пусть А – количество селекторов по id в данном селекторе
Пусть B – количество селекторов по class, селекторов атрибутов и псевдоклассов в данном селекторе (кроме псевдокласса not())
Пусть C – количество типов элементов в данном селекторе
Специфичность это число, которое получается, если записать числа А, B, C одно за другим без пробелов. Объявления в блоках селекторов с большей специфичностью имеют приоритет над объявлениями в блоках селекторов с меньшей специфичностью.
Примеры:
* — универсальный селектор
A=0, B=0, C=0, Специфичность = 0
H1 — обыкновенный селектор по типу элемента
A=0, B=0, C=1, Специфичность = 1
#main p — селектор с комбинатором элемента потомка
A=1, B=0, C=1, Специфичность = 101
a.ext img[alt=”Пушкин”] — составной селектор с селектором атрибута
A=0, B=2 (один селектор по class и один селектор атрибута), C=2 (a и img), Специфичность 22
Th#logo
A=1, B=0, C=1, Специфичность = 101
Th[id=”logo”]
A=0, B=1, C=1, Специфичность = 11
Объявления, заданные с помощью атрибута style имеют больший приоритет, чем объявления в блоках селекторов.
Объявления, заданные не в таблице стилей (например, оформительские атрибуты HTML), имеют меньший приоритет по сравнению с объявлениями CSS.
Наконец, если сортировка по специфичности не помогает выделить перекрывающее объявление, каскад возвращает то объявление, которое идет последним среди конкурирующих объявлений в таблице стилей.
Надеюсь представленная информация поможет вам в будущем! Удачи!:)