text-decoration: none 不生效的主因是样式被覆盖或选择器权重不足，需覆盖 a:link、a:visited、a:hover、a:active 全部伪类，或用 a[href] 提高特异性；推荐 border-bottom 替代以避免透传与兼容问题。
text-decoration:none 为什么有时不生效
直接写 text-decoration: none 却仍有下划线，大概率是样式被覆盖或选择器权重不够。浏览器默认给 a 标签加了 text-decoration: underline，而这个声明常出现在用户代理样式表里——它会被你写的规则覆盖，但前提是你的规则必须“赢过”其他 CSS 声明。
- 检查是否被更具体的选择器覆盖，比如
.nav a:hover里又写了text-decoration: underline - 注意伪类顺序：
a:link、a:visited、a:hover、a:active都得单独设，只写a不管用 - 如果用了 CSS 框架（如 Bootstrap），它的
a样式可能带!important，这时你也得加!important才能压过（不推荐，优先提高选择器特异性）
怎么一次性去掉所有链接下划线
最稳妥的方式是明确覆盖全部状态，而不是依赖继承或简写。别图省事只写 a，那只会干掉默认的 :link 和 :visited，鼠标悬停时下划线又回来了。
- 用组合选择器一次性处理：
a:link, a:visited, a:hover, a:active { text-decoration: none; } - 如果项目允许，用属性选择器更干净：
a[href] { text-decoration: none; }，它天然避开无href的假链接 - 注意：这会影响可访问性。屏幕阅读器依赖下划线识别链接，生产环境建议配合
border-bottom或颜色对比强化视觉提示
inline 元素里套 inline 元素，text-decoration 会透传
text-decoration 在 inline 流中会向下“穿透”，比如 a 里嵌了个 span，即使给 span 单独设 text-decoration: underline，它也会和父级的 none 冲突，最终表现不可控。
- 避免在
a内部再用text-decoration控制子元素，改用border-bottom或background-image模拟下划线 - 若必须局部加装饰，用
text-decoration-line: none+text-decoration-line: underline分开控制（仅支持较新浏览器） - 老项目兼容 IE11？放弃
text-decoration-line，统一用border-bottom替代，更可控
用 border-bottom 替代 text-decoration 的实际写法
当需要精确控制位置、粗细、颜色或 hover 动画时，border-bottom 是更可靠的选择。它不会透传，也不受伪类继承干扰，还能做平滑过渡。
- 基础替换：
a { text-decoration: none; border-bottom: 1px solid currentColor; } - hover 时变色：
a:hover { border-bottom-color: #007bff; } - 想让下划线离文字远一点？用
padding-bottom配合border-bottom，别碰line-height - 注意：
border-bottom会撑高行框，如果周围是纯文本，可能造成基线错位，此时加vertical-align: bottom微调
去掉链接下划线看着简单，真正卡住人的往往是伪类遗漏、透传行为、或者框架样式干扰。最常被忽略的是：没检查 a:hover，结果鼠标一移上去下划线就弹出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
