Урок 12 · CSS

Какое правило побеждает, если их несколько

У элемента может быть несколько правил. Каскад решает, какое из них видно на экране.

Почему это следующий шаг

HTML-страница собрана. Первая настоящая трудность CSS — не свойство, а столкновение свойств.

Как сделать

Если специфичность равна, побеждает правило ниже по файлу. Класс сильнее тега, два класса сильнее одного. Не повышай вес цепочкой из пяти тегов и не ставь !important, чтобы закрасить спор. Одинаковым элементам дай класс. В инструментах браузера зачёркнутое правило проиграло: смотри, кто стоит выше и почему.

p { color: #333; }
.note { color: #245c45; }
.note.is-warning { color: #8a4b08; }

Что проверить

• Цвет заметки задан классом, а не голым p.
• В инспекторе видно проигравшее правило.
• В файле нет !important без короткого комментария, зачем он.