Не применяется CSS-класс на странице
Разберем, что делать, если заданный CSS-класс не применяется к нужным элементам на странице, и как правильно его подключить.
Даже если CSS-класс указан правильно, он может не сработать, если:
- класс не применен к нужному блоку,
- в настройках блока указан другой CSS, который конфликтует,
- CSS-правило перебивается более приоритетным стилем (например, цветом по умолчанию).
Причина проблемы
1) Проверьте CSS-код в HTML-блоке. Убедитесь, что HTML-блок с CSS-классом оформлен корректно:
<stule>
.название класса {
правила;
}
</style>
<stule>
.название класса {
правила;
}
</style>
2) Настройте нужные блоки на странице.
- Перейдите в настройки каждого элемента, к которому нужно применить стиль.
- Включите опцию «Пользовательские CSS-классы».
- Пропишите название нужного класса (без точки).
- Если в блоке уже прописан CSS вручную, удалите его и используйте только имя класса.
- Сохраните страницу.
Как правильно применить CSS-класс
- Временно добавьте в CSS простой стиль для проверки, например: color: red;
- Если цвет не поменялся, вероятно, правило перекрывается другим стилем. В этом случае используйте директиву !important, чтобы сделать правило приоритетным: color: red !important;
- Сохраните и обновите страницу. Если правило применяется — вы увидите результат (например, текст станет красным).
- При необходимости добавьте !important и к другим свойствам.
