← Все вопросы

Два правила задают одному элементу разный цвет — какое из них победит?

Задан 32 месяца назад570 просмотров2 ответа
6

У меня на один и тот же абзац действуют два правила: одно через тег p, другое через класс .note, и цвета у них разные. Какой в итоге применится и почему? Как понять, кто главнее?

Яна Герасимова 🥚 Яйцо
спросил 32 месяца назад

2 ответа

10
✓ Принятый ответ — помог автору

Браузер выбирает по специфичности (весу селектора). Грубо, по возрастанию силы:

  1. селектор по тегу (p) — самый слабый;
  2. селектор по классу (.note) — сильнее;
  3. селектор по id (#note) — ещё сильнее.

Поэтому в твоём случае победит класс .note, даже если правило для p написано ниже:

p { color: black; }       /* слабее */
.note { color: red; }     /* сильнее — победит */

А вот если оба селектора одинаковой силы (например, два класса), то выигрывает тот, что написан ниже в файле — последний побеждает.

Игорь Попов 🥚 Яйцо
32 месяца назад
4

Поэтому совет: не лепи !important, чтобы «продавить» стиль — это перебивает всё и потом сам же запутаешься. Лучше понять иерархию: тег < класс < id < inline-стиль. А при равенстве решает порядок в коде.

Снежана Фролова 🥚 Яйцо
32 месяца назад

Ваш ответ

Войдите, чтобы ответить на вопрос.