Question

我不明白为什么我的导航栏没有改变颜色，尽管我添加了CSS来修改它。这是非常简单的事情，但它真的很困扰我，因为它不能正常工作。

这是我的HTML：

<div class="uk-container uk-container-center uk-margin-top">
   <nav class="uk-navbar" id="navBar">
      <ul class="uk-navbar-nav">
          <li class="uk-active"><a href="">Login</a></li>
      </ul>
   </nav>
</div>

这是我的CSS：

#navBar {
    background-color: black !important;
}

Answer 1

css属性很可能被另一个以同一元素为目标的属性覆盖，因为：

A. 新的css属性位于较旧的css属性之前，或

B。您对css选择器#navbar不够具体。

解答A：

确保此属性：

#navBar {
    background-color: black !important;
}

所有其他css属性，并确保具有上述属性的css文件也其他css文件，看看是否有帮助。

B解决方案：

如果这没有用，那么css选择器可能不够具体。

为了覆盖其他background-color属性，在定位#navbar元素时，新选择器navbar需要比其他选择器更具体。

这可以通过在选择器中包含父divs class / id来完成，如下所示：

.uk-container.uk-container-center.uk-margin-top #navBar {
    background-color: black !important;
}

NB 首先尝试添加上面没有!important标记的css属性，如果它似乎不起作用，请尝试添加上面的!important标记

关于 CSS SPECIFICITY ，请阅读：

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

Answer 2

<div class="uk-container uk-container-center uk-margin-top">
   <nav class="uk-navbar" id="navBar">
      <ul class="uk-navbar-nav">
          <li class="uk-active"><a href="">Login</a></li>
      </ul>
   </nav>
</div>

似乎你的代码工作正常，即使你没有添加！important。您的代码中必须有一些内容，它会覆盖导航颜色（也包括！important）。

导航栏不改变颜色

2 个答案:

关于 CSS SPECIFICITY ，请阅读：