直接写 a { text-decoration: none; } 失效是因选择器权重被 Bootstrap 的 .nav-link 等带 !important 的规则压制，应优先使用内置类 text-decoration-none。
为什么直接写 a { text-decoration: none; } 失效
不是语法错误，是选择器权重被压。Bootstrap 5 的 .nav-link、.dropdown-item、.btn-link 都自带 text-decoration: underline;，且规则带 !important（尤其 CDN 版本）。Vue/React 的 <style scoped> 还会让你的 a 变成 a[data-v-xxx]，权重反而更低。
优先用内置类 text-decoration-none 而非手写 CSS
Bootstrap 5.3+ 的 text-decoration-none 不只是设 none，它已预置了 :hover 和 :focus 下的统一清除逻辑，避免下划线“闪现”。
- 单个链接：
<a href="#" class="text-decoration-none">首页</a> - 整组导航：
<ul class="navbar-nav"><li class="nav-item"><a href="#" class="nav-link text-decoration-none">首页</a></li></ul> - 需要悬停恢复？加
text-decoration-underline-hover：class="text-decoration-none text-decoration-underline-hover"
必须手动覆盖时，!important 怎么写才不翻车
当 text-decoration-none 仍无效（比如碰上 .btn.btn-link > a 或封装过的组件），就得针对性覆盖：
-
.nav-link { text-decoration: none !important; }—— 覆盖导航项 -
.dropdown-item { text-decoration: none !important; }—— 清除下拉菜单项 -
.btn.btn-link > a { text-decoration: none !important; }—— 处理按钮式链接
若用 Sass 编译，改 $link-decoration: none; 更彻底，但注意它只影响基础状态，:hover 还得单独配。
立即学习“前端免费学习笔记（深入）”；
全局重置前必须确认的三件事
删掉下划线不只是视觉调整，它是残障用户识别可点击内容的关键线索。删之前，先补好替代反馈：
- 颜色对比度是否 ≥ 4.5:1？
-
a:focus和a:hover是否有足够视觉反馈（比如变色、边框、阴影）？ - 是否误伤了语义不该去下划线的元素？比如
<button role="link">或图标链接
最常被忽略的是：CSS 加载顺序。自定义样式必须放在 Bootstrap CSS 之后，否则白写。
