Каскадность и приоритеты[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. затем селектор с именем тега.

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

Каскадность. Коктейль из классов[12/15]

Похоже, вы решили головоломку! Поздравляем!

Для решения нужно было лишь переместить CSS-правило для классаgreenниже CSS-правила для классаblue. Когда к одному элементу применяются несколько CSS-правил, то приоритетность этих правил определяется по их селектору. Если селекторы однотипные, как в нашем случае, то тогда более приоритетным является CSS-правило, которое расположено ниже в коде.

Резюмируем. Одному и тому же элементу можно назначать несколько классов. Благодаря механизму каскадности, CSS-правила этих классов будут комбинироваться, а при конфликте свойств будет применяться механизм приоритетов.

Назначение нескольких классов одному элементу — очень гибкий и мощный приём в арсенале веб-разработчика. Он позволяет упрощать и значительно сокращать CSS-код.

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