如何修改Bootstrap nav-pills导航的选中高亮颜色为黑色

1. 单独给#pills-home-tab写背景色失效的原因：
   • 仅给初始带active类的HOME按钮写了样式，当切换到MENU/FAQ按钮时，Bootstrap的交互JS会自动移除HOME按钮的active类、给新选中的按钮加上active类，新激活的按钮没有对应自定义样式；
   • 单ID选择器的自定义样式如果优先级低于Bootstrap默认的.nav-pills .nav-link.active规则，会直接被默认的主题蓝色覆盖。
2. 用:active伪类完全不生效的原因：
   这个伪类是鼠标按住按钮不松开的瞬时触发状态，不是tab切换后持久保留的选中激活态，松开鼠标后样式就会消失，根本没法保持选中态的黑色效果。
3. 套用bg-dark、btn btn-dark失效的原因：
   Bootstrap给pill导航选中态写的专属样式优先级更高，会覆盖通用的背景类、按钮类的样式，导致自定义类不生效。

关键前置要求：自定义CSS必须放在Bootstrap核心样式文件的引入代码之后，才能保证优先级高于默认样式，不被覆盖。

直接添加以下全局CSS规则，即可实现所有pill按钮选中时黑底白字、未选中状态完全不应用黑色填充的效果：

/* 覆盖pill选中态的默认蓝色，实现黑色高亮 */
.nav-pills .nav-link.active {
    background-color: #000;
    color: #fff;
}

/* 可选优化：未选中按钮 hover 时文字变黑，和整体风格统一，避免hover时亮蓝色突兀 */
.nav-pills .nav-link:hover:not(.active) {
    color: #000;
}

方案逻辑说明：
Bootstrap的tab交互逻辑本身就会在切换时自动维护按钮的active类状态——当前选中的按钮加active，之前选中的按钮移除active。上述CSS选择器只对带active类的按钮生效，刚好匹配“仅选中态为黑色”的需求，不需要单独给每个按钮写单独的样式，后续新增tab按钮也不需要额外调整。

你当前的HTML有几处书写疏漏，建议修正避免浏览器解析异常：

• 第一个HOME按钮属性末尾有未写完的ari属性，直接删除即可
• 多处属性值后带多余空格（比如type="button "、role="tab "这类），删除多余空格保证属性格式规范

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