如何覆盖Bootstrap强制链接文本显示下划线的CSS样式？

问题核心 #

Bootstrap 5对<a>标签默认设置了下划线样式，包括默认状态、hover、focus等交互状态下的text-decoration: underline。当<a>包裹<div>这类块级元素时，内部的<h5>、<p>等文本会继承或被这些样式影响，仅给<a>加text-decoration: none会因优先级不足、未覆盖交互状态而失效。

解决方案 #

给包裹块级元素的<a>加自定义类，通过CSS覆盖<a>及其所有子元素的下划线样式，同时覆盖所有交互状态：

1. 修改HTML，给<a>添加类名（比如block-link）：

<a href="/" class="block-link">
  <div>
    <!-- 内部标题、图片、描述内容保持不变 -->
  </div>
</a>

2. 添加自定义CSS：

/* 清除默认状态下的下划线 */
.block-link, .block-link * {
  text-decoration: none;
}

/* 清除hover、focus、active等交互状态的下划线 */
.block-link:hover, .block-link:hover *,
.block-link:focus, .block-link:focus *,
.block-link:active, .block-link:active * {
  text-decoration: none;
}

如果样式优先级仍不够，可结合父容器类提升优先级（避免滥用!important）：

.report-previews .block-link,
.report-previews .block-link * {
  text-decoration: none;
}

.report-previews .block-link:hover,
.report-previews .block-link:hover *,
.report-previews .block-link:focus,
.report-previews .block-link:focus *,
.report-previews .block-link:active,
.report-previews .block-link:active * {
  text-decoration: none;
}

失效原因说明 #

• Bootstrap的<a>标签样式优先级较高，仅设置text-decoration: none无法覆盖其交互状态的下划线规则；
• 当<a>包裹块级元素时，内部文本元素会继承<a>的下划线样式，必须明确给子元素也清除该样式。

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