PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

Всегда ли у дочернего элемента применяется тот цвет который ему указан?

Продвинутые темы

Нет, дочерний элемент не всегда получает указанный ему цвет: результат зависит от наследования, специфичности селекторов, `!important` и каскада CSS.

От чего зависит применяемый цвет

1. Наследование

Некоторые свойства (color) наследуются от родителя. Если у ребёнка цвет не задан явно — он берёт родительский:

.parent { color: red; }
.child { }        /* унаследует red */

2. Специфичность

Если на элемент действуют несколько правил, побеждает более специфичное:

.child { color: blue; }
#main .child { color: green; } /* выше специфичность → green */

3. !important

Перебивает обычную специфичность:

.child { color: blue !important; } /* победит почти всё */

4. Каскад (порядок)

При равной специфичности побеждает последнее правило.

5. Значение inherit/initial/unset

Явно управляют наследованием.

Практический пример

Указали .child { color: blue }, но текст красный, потому что есть более специфичное #wrapper .child { color: red } или инлайн-стиль/!important.

Коротко для собеседования

Нет: применяемый цвет зависит от каскада CSS — наследования (color наследуется), специфичности селекторов (побеждает более специфичный), !important (перебивает) и порядка правил (последнее при равенстве). Инлайн-стиль и !important могут переопределить указанный классом цвет.

Другие вопросы раздела