Каскад, специфичность и наследование

Научись предсказывать, какое правило CSS победит, с помощью специфичности, и используй наследование, чтобы писать меньше кода.

8 мин · 3 вопросов

Ты пишешь правило, перезагружаешь страницу… и ничего не меняется. Чаще всего виноват не баг: виноват каскад. Когда несколько правил нацелены на один и тот же элемент, браузер разрешает спор в таком порядке: происхождение правила (стили браузера, затем твои), специфичность селектора и, наконец, порядок появления в коде. Освоив этот механизм, ты сэкономишь себе часы отладки.

p {
  color: gray;
}

.article p {
  color: navy;
}

Специфичность считается как оценка из трёх частей: (id, классы, элементы). #menu даёт 1-0-0, .nav-link даёт 0-1-0, a даёт 0-0-1. Сравнивают слева направо: #menu (1-0-0) обходит .nav .link .active (0-3-0), даже с тремя классами. Упражнение в уме: кто победит между header nav a (0-0-3) и .main-link (0-1-0)? Класс, потому что класс перевешивает любое количество элементов.

header nav a {
  color: steelblue;
}

.main-link {
  color: crimson;
}

Наследование - твой союзник, чтобы писать меньше кода: свойства, связанные с текстом (color, font-family, font-size, line-height), автоматически передаются потомкам. Свойства блока (margin, padding, border, width) не наследуются - и к счастью, иначе каждый потомок получал бы рамку своего родителя. Поэтому определи типографику один раз, на самом верхнем уровне.

body {
  font-family: "Inter", sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Два правила нацелены на один и тот же абзац: #intro { color: red; }, затем .text { color: blue; }. Какой цвет применится?
   • Синий, потому что класс объявлен последним
   • Красный, потому что id специфичнее класса
   • Никакой, браузер сообщит о конфликте
2. Какое из этих свойств по умолчанию наследуется элементами-потомками?
   • margin
   • color
   • border
   • padding
3. У двух селекторов абсолютно одинаковая специфичность, и они нацелены на один и тот же элемент. Какое правило победит?
   • Правило, написанное последним в таблице стилей
   • Правило, написанное первым
   • Правило с самым коротким селектором