CSS кнопка не меняет цвет

Question

Я пытаюсь отредактировать шаблон, который я загрузил на inte rnet, изменяя некоторые цвета. Однако когда я меняю цвет в файле css, он не меняет его на веб-сайте:

HTML:

<div class="user-panel">
    <a href="https://example.com" target="_blank">Link</a>
</div>

CSS:

.user-panel {
float: right;
font-weight: 500;
background: #ffb320;
padding: 8px 28px;
border-radius: 30px;
}

Вот как я импортирую файл. css:

<link rel="stylesheet" href="{% static 'css/style.css' %}"/>

Итак, я изменил #ffb320 на #cc0000, чтобы вместо желтого был красный цвет, файл был сохранен, и страница перезагрузилась, но цвет не изменился. То же самое и с размером шрифта, и т. Д. c ...

Единственное, что сработало, это использование style='font-size:20px' для размера шрифта.

Что я здесь делаю не так?

Answer 1

Это кнопка со ссылкой, поэтому вам нужно указать «а». Поскольку внутри родителя есть дочерний элемент, когда вы нацеливаетесь на родителя, он не будет автоматически нацеливаться на ребенка. Я узнал это методом проб и ошибок.

Попробуйте вот так:

.user-panel a {
background-color: #cc0000;
} 

Это сработает.

Answer 2

Вы должны проверить оригинал CSS из шаблона. Может быть, есть селектор с большей силой, чем просто .class, я не знаю шкалы силы по памяти, но я считаю, что выполнение чего-то вроде div.class имеет больший приоритет, чем .class.

Вы всегда можете попробуйте добавить! important. Например:

.user-panel {
background: #ffb320!important;
}

Answer 3

Это происходит из-за кеша, поэтому вы можете сделать что-то вроде:

<link rel="stylesheet" href="{% static 'css/style.css' %}?version=55"/>

Кроме того, выполните команду:

python manage.py collectstatic

Answer 4

Попробуйте использовать свойство

background-color

Надеюсь, это поможет