Наследование и каскадирование / Расчёт значения специфичности [15/18]
×

Расчёт значения специфичности [15/18]

Вы вдоволь наигрались со специфичностью, а теперь пришло время изучить полные правила её вычисления.

Специфичность селектора разбивается на 4 группы — a, b, c, d:

  • если стиль встроенный, т.е. определен как style="...", то а=1, иначе a=0;
  • значение b равно количеству идентификаторов (тех, которые начинаются с #) в селекторе;
  • значение c равно количеству классов, псевдоклассов и селекторов атрибутов;
  • значение d равно количеству селекторов типов элементов и псевдо-элементов.

После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.

Посчитаем специфичность в нашем примере:

Селекторa, b, c, dЧисло
span0, 0, 0, 11
div .cat-in-box0, 0, 1, 111
#floor .cat-in-box0, 1, 1, 0110
div span0, 0, 0, 22
.cat-in-box0, 0, 1, 010
#floor span0, 1, 0, 1101

Остюда сразу видно, что в нашем примере самым приоритетным является селектор #floor .cat-in-box.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Расчет значения специфичности</title> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <ol> <li> <p>Рассчитайте значение специфичности для селектора:</p> <pre>.text li.error span {}</pre> <p>Ответ <input type="text" name="exercise_1"></p> </li> <li> <p>Рассчитайте значение специфичности для селектора:</p> <pre>#wrapper .text #message p a {}</pre> <p>Ответ <input type="text" name="exercise_2"></p> </li> <li> <p>Рассчитайте значение специфичности для селектора:</p> <pre>#main .content a:hover {}</pre> <p>Ответ <input type="text" name="exercise_3"></p> </li> </ol> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; } li { margin-bottom: 30px; } pre { max-width: 350px; padding: 5px 10px; background: #f7f7f9; border: 1px solid #e1e1e8; border-radius: 3px; } input[type="text"] { width: 50px; margin-left: 5px; padding: 3px; font-family: "PT Sans", sans-serif; vertical-align: middle; border: 1px solid #cccccc; border-radius: 5px; }
HTML Academy

Рассчитайте значение специфичностей для трёх примеров и введите ответы в поля.

  1. Первый ответ указан правильно.
  2. Второй ответ указан правильно.
  3. Третий ответ указан правильно.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.