修改导航项背景色无效求助：激活/悬停状态设为chartreuse失败

嘿，我看你在尝试给导航的激活项和悬停项设置chartreuse背景色时碰了壁，甚至用了!important都没效果——这大概率是选择器匹配错误或者Bootstrap默认样式优先级更高导致的，咱们来一步步搞定它：

问题根源分析 #

1. 选择器层级不匹配：Bootstrap的导航结构里，.active类是加在.nav-item元素上的，而不是直接作为.navbar-nav的子元素，你原来写的.navbar-nav > .active > a根本没选中目标元素，自然不会生效。
2. 悬停项缺少背景色设置：你只给.nav-item > a:hover设置了color: aqua，但没添加background-color属性，所以背景色不会变化。
3. CSS加载顺序问题：如果你的自定义CSS在Bootstrap的CSS之前加载，就算选择器正确，默认样式也会覆盖你的自定义样式。

修正后的解决方案 #

1. 精准匹配激活项的选择器 #

把原来的激活项样式替换成更贴合Bootstrap结构的选择器：

.navbar-nav .nav-item.active .nav-link {
  color: aqua;
  background-color: chartreuse;
}

这个选择器精准匹配了.navbar-nav下的.active状态的.nav-item里的.nav-link元素，能正确覆盖Bootstrap的默认样式。

2. 给悬停项添加背景色 #

补充悬停状态的背景色设置，同样用精准的选择器：

.navbar-nav .nav-item .nav-link:hover {
  color: aqua;
  background-color: chartreuse;
}

3. 确保CSS加载顺序 #

一定要让你的自定义CSS文件在Bootstrap的CSS文件之后引入，这样你的样式才能拥有更高的优先级去覆盖默认样式。

整合后的完整CSS代码 #

/* NAVBAR TOP */
#top-navbar { background-color: #1f1f1f; }

/* 激活项样式 */
.navbar-nav .nav-item.active .nav-link {
  color: aqua;
  background-color: chartreuse;
}

/* 悬停项样式 */
.navbar-nav .nav-item .nav-link:hover {
  color: aqua;
  background-color: chartreuse;
}

#navbarCollapse { margin-left: 1%; }
#navbarCollapse ul li { display: inline-block; }
.nav-link { margin: 5px; width: 100px; }
/* start update */
nav ul { margin-bottom: 0; }
.navbar-light .navbar-toggler-icon { background-image: none; font-size: 25px; height: auto; width: auto; padding: 3px; }
#navbarCollapse ul { padding-top: 10px }
#navbarCollapse ul li a { margin: 0; padding: 5px 10px; }
nav { position: relative }
nav form { position: absolute; top: 7px; right: 15px; }

这样修改后，激活状态和悬停状态的导航项应该就能正确显示chartreuse背景色了，如果还是有问题，可以打开浏览器的开发者工具（F12）查看元素的样式，看看你的自定义样式是否被正确应用，或者有没有其他更高优先级的样式在覆盖它。

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