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

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

Специфичность селектора разбивается на 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.

Без классных наклеек и значков сейчас никуда. Заходите к нам в магазин.

Выполнить задание

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

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

Первый ответ указан правильно.
Второй ответ указан правильно.
Третий ответ указан правильно.

Теория Проверить Следующее задание

Идёт запись на курс Продвинутый HTML и CSS #12, который стартует 18 сентября.

Курсы

Интенсивы

Информация

Остальное