Некоторые классы CSS не применяются

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать класс, который я мог бы применять к текстовым элементам, чтобы изменять их цвет на основе переменной. Когда я встраиваю это, это работает, но когда я пытаюсь создать пользовательский класс в моих стилях, это не работает. Тем не менее, один из моих пользовательских классов работает, что делает его еще более запутанным.

Вот конкретный фрагмент html, о котором идет речь:

 /* Set initial variable values here */
:root {
    --button-color: #00FFFF;
}

/* Allow colors to be overwritten here */
.text-color {
    color: var(--button-color);
}

.border-color {
    border-width: 5px;
    border-style: solid;
    border-color: #00FFFF;
}

.clickable {
    background-image: url('../patterns/debut_dark.png');
}

 <h3 class='clickable text-center py-2 mb-2 rounded shadow text-color border-color'>Hello</h4>

clickable — это пользовательский класс, он работает.
Остальные, вплоть до text-color, являются классами начальной загрузки. Они работают.
text-color и border-color — это другие мои пользовательские классы, определенные в том же файле, где определен clickable.

Я не могу понять, почему объявления классов не работают, но встраивание

 <h3 class='clickable text-center py-2 mb-2 rounded shadow text-color border-color' style="color: var(--button-color);">Hello</h4>

действительно работает.

Любая помощь с благодарностью.

1. Если вы проверяете стили в консоли разработчика вашего браузера, перезаписывается ли он стилем с более высоким приоритетом?

2. Как вы можете видеть из фрагмента, ваш код работает, следовательно, у вас есть стиль, переопределяющий вышеупомянутый. Как говорит dbs, вы можете проверить элемент, чтобы увидеть, какой это стиль, а затем создать более конкретное правило для его переопределения. Также, чтобы вы знали, у вас есть h4, закрывающий ваш h3

3. Для меня ваш код работает просто отлично … не могли бы вы, пожалуйста, опубликовать свой CSS-файл, чтобы мы могли рассказать вам, что переопределяет ваш код и мешает вам изменять цвет по-своему. потому что я не хочу рекомендовать ID, # иначе !important они испортят специфику CSS, и я не хочу, чтобы вы использовали любой из них для решения вашей проблемы.

Ответ №1:

Хорошо, я думаю, проблема может быть в кэшировании. Похоже, что после отправки моих изменений на github (хотя я использую localhost, а не github, чтобы увидеть изменения) и ожидания около 20 минут, при загрузке его обратно изменения были применены.

1. таблицы стилей кэшируются локально — если вы вносите изменения, используйте ctrl f5, чтобы выполнить «жесткое обновление», которое заставит браузер снова отключить все

Ответ №2:

может быть, просто рабочий hth..

 /* Allow colors to be overwritten here */
.text-color {
    color: var(--button-color) !important;
}

1. не очень хорошее решение используйте important, лучше найдите, почему и какой css перезаписывает это правило

2. Если это не работает, проблема не здесь … это решение для более быстрой отладки…