html - 导航栏不改变颜色

标签 html css uikit navbar

我不明白为什么我的导航栏没有改变颜色,尽管我添加了 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;
}

最佳答案

css 属性很可能被另一个针对同一元素的属性覆盖,因为:

A. 新的 CSS 属性在旧的 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;
}

注意 尝试先添加不带 !important 标记的上述 css 属性,如果它似乎不起作用,则尝试将上述内容与 !important 标签。


关于 CSS SPECIFICITY,请阅读:

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

关于html - 导航栏不改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37577652/

相关文章:

html - 位置的实现利润率如何自下而上:绝对要素

html - 如何在不同高度的div中垂直放置4个盒子?

javascript - 使用数组创建动态图像 slider

html - 为什么不正确地使用 align-items=center center 图像 flex 方向列

ios - UIPickerView 内容中出现奇怪的字符串文本

html - CSS uikit网格组件:Google Chrome中div中的文本重叠

html - 在电子邮件模板中,邮件会自动删除指针事件:类中没有

javascript - 问题设置与jQuery的CSS

iOS 13 UISearchController 书签

html - div 内的文本垂直和水平对齐