Bootstrap 5.3导航栏下拉菜单激活项颜色修改方法

问题根源 #

你当前的自定义CSS选择器nav-item.dropdown .dropdown-item:active特异性不足，无法覆盖Bootstrap内置的.dropdown-item:active默认样式，导致下拉激活项仍显示蓝色。此外，Bootstrap 5的下拉菜单激活状态还包含:focus伪类和.active类两种场景，需要同时覆盖。

修正方案 #

1. 提升选择器特异性（推荐） #

使用更精准的选择器，确保自定义样式优先级高于Bootstrap默认样式：

/* 覆盖下拉菜单点击/聚焦时的激活样式 */
.navbar-nav .dropdown-menu .dropdown-item:active,
.navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: green;
    color: white;
}

/* 覆盖下拉菜单中默认选中项（带.active类）的样式 */
.navbar-nav .dropdown-menu .dropdown-item.active {
    background-color: green;
    color: white;
}

/* 保留你原有的导航项激活/ hover样式 */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
    background-color: green;
    color: white;
}

2. 确认CSS加载顺序 #

务必让你的自定义CSS文件在Bootstrap官方CSS之后加载，这是样式覆盖的前提条件。

3. 应急方案：使用!important（不推荐长期使用） #

如果上述方法仍未生效，可临时用!important强制覆盖，不过会增加后续样式维护成本：

.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: green !important;
    color: white !important;
}

验证步骤 #

1. 打开浏览器开发者工具（F12），选中下拉激活项，查看Styles面板
2. 确认你的自定义样式是否被应用，若样式被划掉则说明仍被其他高优先级样式覆盖，需进一步调整选择器

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