text-decoration: none 无效主因是被更高优先级样式（如 a:hover、第三方库 !important 或伪元素）覆盖；需用 DevTools 检查 computed 值并统一重置所有伪类状态。
text-decoration: none 是唯一可靠、通用且必须写的规则，其他写法要么无效，要么掩盖真问题。
为什么直接写 a { text-decoration: none; } 有时没用？
不是代码写错了，而是被更高优先级的样式盖住了。常见干扰源有：
-
a:hover或a:active单独设置了text-decoration: underline，必须一并覆盖 - 第三方 CSS（比如 Bootstrap、Tailwind）里用了
!important，得用相同权重或更高权重对抗 - 链接在富文本容器中（如
div.content），父级设了text-decoration: underline—— 注意：该属性不继承，但 DevTools 里容易误判为“继承导致”，实际要查 computed 样式中哪条生效了 - 某些编辑器输出用伪元素（
::after）模拟下划线，text-decoration完全不生效
怎么精准定位失效原因？
打开浏览器 DevTools，选中那个带下划线的 a 元素，在 Styles 面板里找 text-decoration 这一行：
- 如果它被划掉（灰色 + 删除线），说明被其他规则覆盖了，点开右侧来源，看是哪个文件哪一行在起作用
- 如果它显示为正常黑色但仍有下划线，说明下划线来自别的机制（比如
border-bottom、伪元素、或text-underline-offset配合了负值） - 切换到 Computed 面板，搜
text-decoration，确认最终计算值是不是none
要不要用 text-decoration-line: none？
可以，但没必要作为首选：
-
text-decoration-line: none和text-decoration: none在表现上完全一致，只是前者更细粒度 - 它在 Safari 15.4 之前不支持，而很多企业内网还在用旧版 Safari
- 如果你同时要改颜色或粗细（
text-decoration-color/text-decoration-thickness），再考虑升级写法；否则老老实实用text-decoration: none更稳
真正卡住人的从来不是“怎么写”，而是没意识到样式是否真的应用到了目标元素——尤其是当链接嵌在 CMS 输出、Markdown 渲染结果或 iframe 里时，作用域和继承链会悄悄改变预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
