Home / Questions / 193437
Accepted
ricardo leiva sikic
Asked: 2020-09-03 10:39:53 +0800 CST 2020-09-03 10:39:53 +0800 CST

更改导航栏背景

  • 772

我有一个引导导航栏（下载 CDN 以设置引导页面的所有更改）。问题是我无法更改它的背景，无论我进入它的类并使用！important，我已经检查了检查 DOM 中的元素，并且更改没有任何反应。

我附上导航栏代码：

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

导航栏

首页(current) 关于我们 服务 文章 联系

我附上css代码：

.navbar {
background: red !important;

}

应该注意的是，我还尝试使用元素检查器（bg-light）告诉我的类，并且背景也没有改变。

css

3 Answers

  1. Best Answer

    这是由于 CSS 的特殊性，它决定了哪些样式将优先于浏览器。如果你通过一个类将一个元素声明为background:red ，然后通过一个 ID 声明background:red，最后通过一个内联样式<nav style="background:red"></nav>，浏览器将建立如下的层次结构：

    1-样式在线

    2-ID

    三级

    当一个 !important 被声明时，浏览器会忽略特殊性并设置样式，即使它只在一个类中。这就是为什么即使您在样式中声明背景并为其添加重要元素，浏览器也会忽略它并设置引导程序，因为导航栏被分配了一个优先于其他类的.bg-lght类。在这些情况下，建议您在引导 CDN 之后引用您的样式表：示例：

    <link rel="stylesheet" href="bootstrap">
<link rel="stylesheet" href="susEstilos">

    不要忘记为您的样式设置 !important，因为如果浏览器有两个带有 !important 的类，它将优先考虑最后一个。

    引导程序

    nav{
background: red !important
}

    你的风格

    nav{
background: red !important
}

    官方文档：

    https://developer.mozilla.org/en/docs/Web/CSS/Specificity

    • 5

  2. 修改导航栏类

    <nav class="navbar navbar-light" style="background-color: red;">
    <!-- Navbar content -->
</nav>

    引导文档

    • 2

  3. 删除 Bg-LIGHT 并为其写入所需的类，例如 class="bg-personal"

    然后在 CSS

    .bg-personal{
  background-image: url (Aqui va la url de tu imagen)
}
    • 1