a { text-decoration: none; } 未生效主因是伪类、父级样式或第三方css覆盖，需同时设置 a:hover、a:visited 等状态并检查computed面板定位真实来源。
直接写 a { text-decoration: none; } 就能去掉默认下划线，但多数时候它“没生效”，不是语法错，而是被覆盖、漏状态或继承干扰了。
为什么写了 text-decoration: none 还有下划线
最常见原因不是代码写错了，而是样式没真正作用到目标元素上：
-
a:hover、a:visited、a:focus等伪类单独设置了text-decoration: underline，只写a选择器压不住它们 - 父容器（比如
nav、.content）设了text-decoration: underline，虽然该属性不继承，但浏览器渲染时可能误判为“透传”——实际要查的是是否用了text-underline-offset或伪元素模拟 - 第三方 CSS（如 Bootstrap、Tailwind）或富文本编辑器输出的 HTML 中，有更高优先级规则或
!important覆盖了你的设置 - DevTools 的 Computed 面板里，
text-decoration显示为 strike-through（删除线）或灰色，说明它被其他规则屏蔽了
怎么确保下划线真正消失
别只靠一个 a 规则，得覆盖所有可能触发下划线的状态：
- 把常用伪类一次性写全：
a, a:hover, a:visited, a:focus, a:active { text-decoration: none; } - 如果只针对某类链接（比如导航），用 class 更安全：
.nav-link, .nav-link:hover, .nav-link:visited { text-decoration: none; } - 遇到父级干扰，直接在链接上加
text-decoration: none强制中断，例如：@#@#@#@#@#@#@#@#@#@0（仅限调试或极简场景） - 现代项目可尝试更精确控制：
a { text-decoration-line: none; }，它和text-decoration: none效果一致，但能与text-decoration-color、text-decoration-thickness组合使用
内联样式 vs 外部 CSS：哪个更靠谱
内联样式（style="text-decoration: none"）优先级最高，能快速验证是否是优先级问题，但不适合批量控制：
- 适合单个链接临时调试，或 CMS 输出无法改 class 的硬编码场景
- 外链或
<style></style>中的规则更易维护，但要注意选择器权重——.header a比a优先级高，nav a:hover可能盖过你的a:hover - 避免混用：同一链接既写 class 又写内联 style，容易互相覆盖，后期难排查
真正麻烦的不是“怎么写”，而是“谁在暗处偷偷加回下划线”——打开 DevTools，逐层点开 Computed 样式，盯住 text-decoration 那一行，看它来自哪条规则、是否被划掉，这才是定位根源的唯一可靠路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
