Вы вдоволь наигрались со специфичностью, а теперь пришло время изучить полные правила её вычисления.
Специфичность селектора разбивается на 4 группы — a
, b
, c
, d
:
style="..."
, то а=1
, иначе a=0
;b
равно количеству идентификаторов (тех, которые начинаются с #
) в селекторе;c
равно количеству классов, псевдоклассов и селекторов атрибутов;d
равно количеству селекторов типов элементов и псевдо-элементов.После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.
Посчитаем специфичность в нашем примере:
Селектор | a, b, c, d | Число |
---|---|---|
span | 0, 0, 0, 1 | 1 |
div .cat-in-box | 0, 0, 1, 1 | 11 |
#floor .cat-in-box | 0, 1, 1, 0 | 110 |
div span | 0, 0, 0, 2 | 2 |
.cat-in-box | 0, 0, 1, 0 | 10 |
#floor span | 0, 1, 0, 1 | 101 |
Отсюда сразу видно, что в нашем примере самым приоритетным является селектор #floor .cat-in-box
.
Рассчитайте значение специфичностей для трёх примеров и введите ответы в поля.
Обсуждение и комментарии
Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.
Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.