html - 导航栏不改变颜色

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 属性在旧的之前，或者

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

A 的解决方案:

确保此属性:

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

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

---

B 的解决方案:

如果这没有帮助，则可能是 css 选择器不够具体。

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

这可以通过在选择器中也包含父 div 类/id 来完成，如下所示:

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

N.B. 首先尝试添加上面的 css 属性而不使用 !important 标签，如果它似乎不起作用，然后尝试添加上面的内容和 >!important 标签。

---

关于CSS SPECIFICITY，请阅读:

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