Почему не применяется CSS: последовательная диагностика
Проверяем загрузку файла, селектор, каскад и вычисленные значения без случайного добавления !important.
Задача и ограничения
Если элемент выглядит неправильно, причина не обязательно в самом свойстве. Файл может не загрузиться, селектор не совпасть, правило проиграть каскаду или модель раскладки не поддерживать ожидаемое поведение. Диагностика по шагам экономит время.
Пошаговое решение
Сначала проверьте Network: нужный CSS должен загрузиться, а в ответе действительно должны быть стили. Если сервер отдаёт HTML ошибки с успешным статусом, внешний вид всё равно не изменится. Убедитесь, что редактируете нужный файл и актуальную версию.
Затем выберите элемент в инспекторе. Если правила нет в Styles, проверьте селектор и условие @media. Если объявление зачёркнуто, найдите победившее правило. Если значение применено, но результат не тот, изучите display, размеры и свойства родителя.
В примере класс задаёт зелёный цвет, а более общий p — другой. Это намеренный конфликт для изучения специфичности. Меняйте одно условие за раз и фиксируйте, какое изменение повлияло на результат.
Код компонента
<style>
.notice { color: #11694e; padding: 18px; }
p { color: #a54827; }
</style>
<p class="notice">Проверьте, какое правило определило цвет.</p>Что может пойти не так
Как проверить результат
- Проверьте факт загрузки файла.
- Найдите совпавший селектор и победившее объявление.
- Посмотрите Computed и геометрию блока.
- После исправления проверьте соседние элементы.
Разберите также: специфичность, селекторы.