Моя собственная css не отменяет bootstrap css

Question

Я не знаю, почему мой пользовательский файл css не перезаписывает bootstrap css. Я знаю о каскаде и о том, что мой новый атрибут класса css должен иметь более высокий приоритет по сравнению с начальной загрузкой, но почему-то мне не хватает того, как именно его переопределить. Это код:

<nav class="navbar navbar-expand-lg navbar-light bg-light">

Если я изменю bg_light на bg_red, это изменит фон на красный, но если я попытаюсь определить его во внешнем cs, используя только то, что он ничего не сделает.

и моя строка файла css:

nav.bg-light {
    background-color: red;
}

Я также попытался поместить все классы туда:

nav.navbar.navbar-expand-lg.navbar-light.bg-light {
    background-color: red;
}

но это все равно не меняет мой цвет. Что мне не хватает? Я пытаюсь узнать, как переопределить bootstrap css, чтобы иметь возможность настроить его. Спасибо за помощь.

Answer 1

CSS - это каскадные логи c, поэтому убедитесь, что вы загрузили CSS ПОСЛЕ того, как вы загрузили bootstrap: например:

 <link rel="stylesheet" href="css/bootstrap.css">
 <link rel="stylesheet" href="css/style.css">

, если проблема не исчезнет, ​​а затем это, скорее всего, потому, что класс bootstrap был определен со свойством! важное, в этом случае вам также нужно добавить! важное

nav.bg-light {
    background-color: red !important;
}

Answer 2

.bg-light - это утилита из Bootstrap для подсветки цвета фона, а ее свойство в CSS определяется с помощью !important. Таким образом, вы не можете переопределить это без использования !important в вашем CSS.