Question

为什么导航栏背景不会改变？

我需要将此导航栏置于黑色背景中，但是即使使用!important参数，我也无法使其正常工作。

css类甚至位于我的custom.css文件的底部。

可能是什么问题？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="

        Welcome to the Cushion Store

">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/custom.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
          integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <title>Title</title>
</head>
<body>
<div>

    <div class="container">

        <div class="container-fluid bg-light nav-bar-fixed-top my_top_navbar_div">


<!--- GALLITO NAVBAR --->

<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">


        <ul class="navbar-nav mr-auto">

            <li class="nav-item active">
                <a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Etiquetas</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Magnetos</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Pines</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Pines</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Empaques</a>
            </li>
        </ul>


        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link"><i class="fas fa-shopping-cart"></i></a>
            </li>


                <li class="nav-item active">

                </li>


            <li class="nav-item active">
                <a class="nav-link" href="#">Registro</a>
            </li>
        </ul>


    </div>
</nav>

custom.css：

    body {
    font-family: 'Roboto', sans-serif;
}

/* === NavBar === */
.nav-item {
    letter-spacing: .2em;
    font-size: 14px;
    text-transform: uppercase;
}


.dropdown-item {

}


/* == Footer ==== */

.my_footer {
    background-color: #5a6268;
}

.my_footer p {
    padding-top: 20px;
    font-size: 14px;
}


/* == Category Page == */

.my_row_class {
    padding-top: 15px;
}

.my_row_class .mx-auto p {

    color: #000;
    font-size: 12px;
}


.my_row_class .mx-auto p a {

    color: #000;
    font-size: 12px;
    text-decoration: none;
}

.my_image {
    width: 100%;
    height: auto;
}

.my_title {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .2em;
}

.my_image_padding {
    padding-top: 16px;
}

.my_bottom_margin {
    margin-bottom: 10px;
}

.card-body h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .2em;
}

/*=== Product Page ==*/

.my_prod_row_class {
    padding-top: 15px;
    padding-bottom: 20px;
}

.my_prod_row_class .mx-auto p {
    color: #000;
    font-size: 12px;
}


.my_prod_row_class .mx-auto p a {
    color: #000;
    font-size: 12px;
    text-decoration: none;
}


.my_prod_title {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .2em;
    padding-top: 15px;
    padding-bottom: 10px;
}

.my_prod_text {
    padding-right: 20px;
}

/* === Pay With Card === */

.stripe-button-el {
    width: 100% !important;
    display: block !important;
    background-color: #868e96 !important;
    border: 0px !important;
    background-image: none !important;
}

.stripe-button-el span {
    display: block !important;
    position: relative !important;
}


.errorlist li {
    color: red;
    font-weight: bold;
}


.my_custom_div {
    margin-bottom: 20px !important;
}

.my_top_navbar_div {
    height: 60px;
    line-height: 50px;
}

.my_custom_menu {

    text-align: right !important;
}

.my_custom_menu ul li {
    list-style: none;
    color: black;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 12px;
    padding-right: 20px;
    display: inline;
}


.my_custom_menu ul li a {
    text-decoration: none;
    color: black;
    list-style: none;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 12px;
}





/* BOTONES JUMBOTRON */



.btn-azul {
  text-decoration: none;
  background-color: #5ba4e6;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}

.btn-azul:focus {
    outline:none;
}


.btn-azul:hover {
  text-decoration: none;
  background-color: #7ab6eb;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}


.btn-naranja {
  text-decoration: none;
  background-color: #ffa31a;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,250,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}

button.btn-naranja:focus {
    outline:none;
}




button.btn-naranja:hover {
  text-decoration: none;
  background-color: #ffad33;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}






/* ==================== */

.btn-xlarge {
    padding: 18px 28px;
    font-size: 22px;
    line-height: normal;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    }



nav.navbar {padding: 0 1rem;}

li.nav-item:hover {
  background-color: saddlebrown;
}


/*=== NAVBAR === */


.navbar-bg {
    background-color: black !important;
}

更新1：

我认为这与保存在“缓存”中的mi css文件有关吗？

当我评论所有CSS注释时，页面看起来都一样。但是，当我通过控制台直接在HTML中删除/添加类时，我看到了页面中的更改。

我用CTRL + F5刷新了页面，但没有效果。我应该提到的是，这是Django在PyCharm 2018中开发的网页。

Answer 1

尝试这种方式：

<nav class="navbar navbar-expand-md bg-dark fixed-top">

并从您的CSS文件中删除.navbar-bg类。

Answer 2

与我完全一样的问题。这就是答案。在这里查看您的代码：

<link rel="stylesheet" href="/static/css/custom.css">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"

已将custom.css的级别设置为比引导css样式表低的css样式表的顺序。这样，当代码运行时，它会简单地通过引导程序样式覆盖您的样式表（在这种情况下，因为引导程序已经具有背景颜色，因此它将自动替换您的背景颜色）

解决方案：

<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
<link rel="stylesheet" href="/static/css/custom.css">

只需将自定义css放在所有链接的这些底部，即可解决问题！

*注意：请不要忘记进行更改（重新加载并重新加载）！

Answer 3

好吧，您的代码可以正常工作（经过测试）。

对您不起作用的原因是您的浏览器保存了网页的缓存版本。

因此，在浏览器中，尝试“强制重新加载”以删除所有潜在的缓存版本并重新加载页面。

要在Chrome中执行此操作：打开开发人员工具（按F12键），然后右键单击浏览器的刷新图标。选择“空缓存并重新加载”，然后查看它是否适合您。

html：导航栏背景颜色不变

3 个答案: