Наследование и каскадирование / Ещё одна задачка на специфичность [14/18]
×

Ещё одна задачка на специфичность [14/18]

Как вы уже догадались, самым главным механизмом для определения приоритетов стилей является специфичность. Поэтому давайте еще немного потренируемся работать с ней.

Рассмотрим пример: на полу в коробке сидит кот

<div id="floor"><span class="cat-in-box">Кексик</span></div>

Допустим в стилях существуют следующие определения:

span {
    background-color: #27ae60; /* Зеленый */
}

div span {
    background-color: #2980b9; /* Синий */
}

#floor .cat-in-box {
    background-color: #34495e; /* Мокрый асфальт */
}

.cat-in-box {
    background-color: #8e44ad; /* Фиолетовый */
}

#floor span {
    background-color: #c0392b; /* Красный */
}

div .cat-in-box {
    background-color: #e67e22; /* Оранжевый */
}

А теперь вопрос на засыпку: какого цвета будет коробка? Сначала сделайте предположение, а затем проверьте.

Почему именно такой и как это определяется мы расскажем в следующем задании.


Выполнить задание
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"> <link href="/assets/course66/catinbox.css" rel="stylesheet" type="text/css"> </head> <body> <div id="floor"> <span class="cat-in-box">Кексик</span> </div> </body> </html>
CSS
HTML Academy
  1. Скопируйте кусок CSS-кода из блока с теорией и проверьте какого цвета будет коробка.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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