如何重置Bootstrap 5中text-muted类的文字效果

问题原因 #

Bootstrap 5 的 .text-muted 类的选择器优先级高于你当前写的 li a 选择器，导致你自定义的 color: white 被覆盖，同时hover状态下没有指定足够优先级的颜色规则，因此无法撤销灰化效果。

解决方案 #

• 方案1：自定义带足够优先级的CSS规则
  直接在原有CSS基础上调整选择器，匹配带有.text-muted类的链接，优先级足够覆盖Bootstrap默认规则，兼容性最好，不依赖Bootstrap版本：

li a.text-muted:hover {
  color: white;
  text-decoration: underline;
}

• 方案2：使用Bootstrap 5.2+内置的hover状态工具类
  如果你使用的是Bootstrap 5.2及以上版本，可以直接用内置的状态工具类，不需要额外写自定义CSS，修改HTML即可：

<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted hover:text-white hover:underline">Home</a></li>

• 方案3：用!important强制覆盖（非必要不推荐）
  如果仅需要临时快速生效，也可以给颜色属性加!important提升优先级，但会全局提升该规则权重，可能影响后续样式调整：

li a:hover {
  color: white !important;
  text-decoration: underline;
}

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