Знакомство с CSS / Каскадность и приоритеты [11/15]
×

Каскадность и приоритеты [11/15]

Когда в предыдущем задании мы задали цвет фона для правила с классом truth, одно из свойств второго абзаца переопределилось:

p {
  padding: 10px;
  background-color: #dff0d8;
}
       +
.truth {
  background-color: #aaddff;
}
       =
стили второго абзаца {
  padding: 10px;
  background-color: #dff0d8;
  background-color: #aaddff;
}

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

  1. CSS-правила в значении атрибута style самые приоритетные,
  2. за ними идёт селектор с id,
  3. затем селектор с классом,
  4. затем селектор с именем тега.

На самом деле, механизм определения приоритетов и специфичности более сложный. Подробно он описан в курсе «Наследование и каскадирование».


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Каскадность и приоритеты</title> </head> <body> <h1>Каскадность и приоритеты</h1> <p class="blue">Каскадность — это очень мощный механизм.</p> <p class="green">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p> <p class="blue green">Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p> </body> </html>
CSS
p { padding: 10px; outline: 2px solid rgba(0, 0, 0, 0.1); } .green { background-color: #dff0d8; } .blue { background-color: #aaddff; }
HTML Academy

Сейчас вам предстоит решить маленькую головоломку. В задании HTML-редактор заблокирован. Первому абзацу задан класс blue, второму — green, а у третьего абзаца сразу два класса — blue и green.

  1. Измените порядок CSS-правил так, чтобы фон третьего абзаца стал зелёным.

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

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

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

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

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

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