我自己的CSS不会覆盖引导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;
}

但是它仍然不会改变我的颜色。我想念什么？我正在尝试学习如何覆盖引导CSS以便对其进行自定义。感谢您的帮助。

Answer 1

CSS与级联逻辑有关，因此请确保在加载bootstrap之后再加载CSS： 例如：

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

如果问题仍然存在，则很可能是因为bootstrap类是使用！important属性定义的，在这种情况下，您还应该在您的属性中添加！important

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

Answer 2

.bg-light是Bootstrap的一种实用工具，用于使背景色变亮，它在CSS中的属性是用!important定义的。因此，如果不在CSS中也使用!important，就无法覆盖它。