a { text-decoration: none; } 几乎必然失效，因被bootstrap 5高权重规则（如a:not([href]):not([class])）及!important样式覆盖；应按组件类型精准覆盖，如.nav-link { text-decoration: none !important; }，并优先使用a[href]确保可访问性。
直接写 a { text-decoration: none; } 几乎必然失效——不是语法错，是被 Bootstrap 5 的高权重规则压住了，而且全局关掉下划线会严重损害可访问性。真要重置，得按场景选方式，不能一刀切。
为什么 a { text-decoration: none; } 总是不生效
Bootstrap 5 的源码里有类似这样的规则：a:not([href]):not([class]) { text-decoration: none; }，选择器权重（2 个伪类 + 1 个属性）远高于单纯一个 a；CDN 版本中还有带 !important 的 .nav-link、.dropdown-item 等规则；Vue/React 的 <style scoped></style> 还会让你的选择器变成 a[data-v-xxx]，权重进一步降低。
检查浏览器开发者工具的 “Computed” 面板，看最终生效的 text-decoration 来自哪条规则——别猜，看实际层叠结果。
按组件类型精准覆盖，而不是全局暴力清除
Bootstrap 5 中不同上下文的链接由不同类控制，各自有独立样式逻辑：
-
.nav-link、.dropdown-item、.list-group-item a：必须单独写.nav-link { text-decoration: none !important; }等，a规则完全无效 -
.btn.btn-link > a：这个结构常见于按钮式链接，需显式覆盖.btn.btn-link > a { text-decoration: none !important; } - Vue/React 单文件组件启用
scoped时：用:deep(a)（Vue 3）或/deep/ a（旧版）穿透作用域 - 只影响带
href的真实链接：用a[href]替代a，避免误杀<a role="button"></a>这类语义错误用法
必须保留可访问性反馈，不能只删下划线
纯文字链接去掉下划线后，若颜色对比度 :hover/:focus 视觉反馈，对屏幕阅读器用户和色觉障碍者就是隐形陷阱。
- 确保
a与正文文字的对比度 ≥ 4.5:1（可用 axe 或 WAVE 工具验证） - 至少提供一种非颜色反馈：
a:hover { color: #0d6efd; border-bottom: 2px solid #0d6efd; }或text-decoration-underline-hover类 - 语义上无
href的“假链接”，不该用<a></a>，改用<button role="link"></button>，天然无下划线且可访问性合规 - 如果用了
text-decoration-none，它已预设清除:hover和:focus下划线，但你仍需补上其他反馈（比如背景色变化）
真要全局重置？先确认加载顺序和选择器权重
全局方案不是不能做，但必须满足两个硬条件：
- 自定义 CSS 文件必须放在 Bootstrap CSS 之后引入，否则白写
- 用更高权重的选择器，例如
body a、.my-app a或a[href]，而不是裸a - 如果仍被压，再加
!important，但仅用于最终兜底，不要一开始就堆 - Sass 用户可在导入 Bootstrap 前重定义变量：
$link-decoration: none;，但它只影响基础状态，:hover仍需手动配
真正麻烦的从来不是“怎么删”，而是删完之后谁还看得出那是链接——这点在响应式断点切换、焦点管理、无障碍测试里最容易露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
