Bootstrap导航栏hover/点击时颜色不生效问题求助

嘿，我来帮你搞定这个Bootstrap导航栏的样式问题！你的核心困扰其实是CSS样式优先级冲突——Bootstrap自带的导航栏hover、active状态样式优先级比你自定义的普通选择器更高，导致你的样式被默认样式覆盖了。咱们用更精准的选择器就能轻松解决，不用依赖!important（当然紧急情况也能用，但优先用优先级匹配的写法）。

修改后的完整CSS代码 #

.container-fluid{
  margin-left: 30em;
}
.navbar-brand{
  max-width:100px;
  padding-left: 10px;
}
.navbar-default {
  background-color: #f8f8f800;
  border-color: #e7e7e700;
}
/* 默认链接样式：把字体、内边距合并到高优先级选择器里 */
.navbar-default .navbar-nav>li>a {
  color: #faebd7;
  padding-top: 40px;
  padding-bottom: 15px;
  font-size: 1.8em;
  font-weight: bold;
}
/* Hover悬停状态 */
.navbar-default .navbar-nav>li>a:hover {
  color: #ff6347; /* 替换成你想要的悬停颜色 */
  background-color: transparent; /* 不需要背景色就设为透明 */
}
/* 点击/聚焦（Focus/Active）状态 */
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:active {
  color: #ff4500; /* 替换成你想要的点击状态颜色 */
  background-color: transparent;
}

几个关键细节说明 #

• 我把你原来单独写的.navbar-nav>li>a的内边距、字体样式合并到了.navbar-default .navbar-nav>li>a里，这样所有默认样式的选择器优先级一致，避免局部样式被覆盖。
• 针对hover、focus、active状态，我们使用了和Bootstrap默认样式完全匹配的选择器结构，确保自定义样式的优先级足够高，能成功覆盖默认样式。
• 如果你的导航栏有当前页面的激活项（比如给对应<li>加class="active"），可以额外添加这段样式来控制当前页面链接的状态：

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #ffffff; /* 当前页面链接的颜色 */
  background-color: transparent;
}

直接替换掉你原来的CSS代码，调整颜色值到你想要的效果，hover和点击时的颜色切换应该就能正常生效啦！

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