Bootstrap 4手风琴.btn-link样式覆盖求助：移除激活/访问下划线

你遇到的问题其实是CSS优先级导致的——Bootstrap原生的.btn-link相关样式选择器权重比你写的更高，所以你的样式被覆盖了。不用修改Bootstrap原生文件，在CodePen里通过提升自定义样式的权重就能解决，给你两个靠谱的方案：

方案一：使用更具体的选择器（推荐） #

Bootstrap对.btn-link的状态样式可能是结合了父元素（比如.card-header）定义的，所以你可以把父元素选择器加上，让你的样式权重超过原生样式：

/* 覆盖激活和已访问状态的下划线 */
.card-header .btn-link:active,
.card-header .btn-link:visited {
  text-decoration: none;
}

/* 可选：如果需要取消hover/focus状态的下划线，也可以加上 */
.card-header .btn-link:hover,
.card-header .btn-link:focus {
  text-decoration: none;
}

这个方法更规范，不会影响其他地方的.btn-link样式，只针对手风琴卡片头部的按钮生效。

方案二：使用!important（应急用） #

如果方案一暂时没生效（比如原生样式权重特别高），可以用!important强制覆盖，但要注意尽量少用，避免后续样式冲突：

.btn-link:active,
.btn-link:visited {
  text-decoration: none !important;
}

原理是!important会让这条样式的优先级最高，直接覆盖所有同属性的其他样式。

你可以直接把上面的代码复制到CodePen的CSS面板里，刷新后就能看到效果了——不用修改Bootstrap原生文件，自定义样式就能覆盖预设类。

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