应先用开发者工具检查 computed 样式定位生效规则，再针对 a、a:visited、a:hover、a:focus 等状态统一设置 text-decoration: none；内联样式需改 JS 逻辑或用属性选择器应急；outline 需配合 focus 可访问性反馈；避免全局重置影响语义。
链接下划线去不掉？先确认是否被其他样式覆盖
直接写 a { text-decoration: none; } 有时没用，不是语法错，而是 CSS 优先级或继承搞的鬼。浏览器默认给 a 元素加了 text-decoration: underline;，但如果你的样式表里有更具体的规则（比如 .nav a:hover 或带 !important 的旧规则），它就会赢。
- 打开开发者工具，选中链接，看「Computed」面板里
text-decoration最终值是什么，点击右侧箭头定位到生效的那条规则 - 如果发现是
a:visited或a:hover还保留着下划线，得单独重置它们：a:visited, a:hover, a:focus { text-decoration: none; } - 某些 UI 框架（如 Bootstrap）会把
text-decoration写在伪类里，漏掉任一状态都可能“闪现”下划线
内联样式或 JS 动态插入的链接要特别处理
服务端渲染或 JS 拼接的 HTML 里，如果链接带了 style="text-decoration: underline;"，CSS 选择器默认干不过它——除非你加 !important，但不推荐。
- 优先改生成逻辑：JS 中创建
a元素后，显式设置el.style.textDecoration = 'none'; - 如果必须用 CSS 覆盖内联样式，可用属性选择器强化：
a[style*="text-decoration"] { text-decoration: none !important; }（仅应急，别长期留着） - 注意：React/Vue 等框架中，用
className或class绑定样式时，确保 class 名没拼错，且样式文件确实被引入
移动端点击反馈残留的虚线框怎么一起去掉
去掉下划线只是第一步。iOS Safari 和部分安卓浏览器点击链接后会显示一圈蓝色轮廓（outline），这是可访问性设计，但常被误认为“样式没清干净”。
- 安全清除方式：
a { outline: none; }—— 但必须配合focus时提供替代视觉反馈，否则键盘用户无法识别焦点位置 - 更稳妥的做法：
a:focus { outline: 2px solid #007bff; outline-offset: 2px; }，既去默认虚线，又保可访问性 - 别只写
:active，它只在按下的瞬间生效，松开后轮廓还在
全局重置需谨慎：a 标签不止用于导航
有些团队图省事，在 CSS 重置里写 a { text-decoration: none; }，结果所有链接（包括文档内锚点、API 返回的富文本链接）全没下划线，用户根本看不出哪是可点击的。
- 只对明确可控的区域重置，比如：
.header-nav a, .sidebar-menu a - 内容区（如
.article-content）里的链接，建议保留默认下划线，或统一用颜色+hover 变化来暗示可交互 - 若用 CSS-in-JS 或原子化方案（如 Tailwind），避免全局应用
no-underline，改用作用域内修饰
真正麻烦的从来不是加一行 text-decoration: none;，而是它到底作用在哪个元素、哪个状态、哪个上下文里——漏掉一个伪类，或者没覆盖到动态插入的节点，下划线就阴魂不散。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
