为何Bootstrap导航栏的bg-dark类会阻止background-color生效？

这是因为Bootstrap的bg-dark类样式里加了!important声明，它的优先级会远超普通的类选择器——哪怕你的CSS文件在Bootstrap之后加载，只要你的样式没加!important，就没法覆盖它。

Bootstrap给背景色工具类添加!important，就是为了确保这类工具样式能强制覆盖其他普通背景样式。你的.navbar只是单个类选择器，优先级拼不过带!important的.bg-dark。

有两种常用的解决方式：

• 给你的样式也加上!important，强制提升优先级：

.navbar {
  background-color: red !important;
}

• 使用更具体的选择器（需配合!important，因为Bootstrap的bg-dark带了该声明）：

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

另外你之前测试的移除nav标签上的bg-dark类也有效，这是因为没有了带!important的类干扰，你的.navbar样式就能正常生效了。

内容的提问来源于stack exchange，提问作者JLCarveth