Не срабатывает переопределяемый стиль CSS
Есть размеченная html-страница. В файле стилей для обрамляющего блока указываю изначальный размер шрифта. Потом в одном из вложенных элементов пытаюсь размер шрифта изменить. Но этого не происходит! Хотя в своем файле стилей - объявление размера шрифта вложенного элемента происходит после определений обрамляющего блока. Vivaldi показывает это вот так:
Выход из положения: добавляю !important в определение размера шрифта для вложенного элемента, тогда все работает как надо.
Вопрос: почему так происходит, и можно ли обойтись без !important?
PS. Мой файл стилей в странице определен последним, если что.
Ответы (1 шт):
Специфичность селектора #page-content p выше, чем у селектора .room-card-text.
Поэтому, даже если это правило с двумя компонентами в селекторе (здесь это id и тип) определено в CSS раньше, выше правила с одним компонентом в селекторе - все равно имеет более высокий приоритет, и не перекрывается.