关闭超链接默认下划线需对a元素显式设置text-decoration: none，并覆盖:link、:visited、:hover、:active状态；注意父级继承、框架样式干扰、border-bottom等模拟下划线，以及无障碍focus样式处理。
超链接默认下划线怎么关掉
直接写 text-decoration: none 就行，但只对 a 元素本身生效，不自动影响它的子元素（比如里面套了 span 或图片）。常见错误是加了却没效果，八成是因为选择器权重不够，或者被浏览器默认样式或框架样式覆盖了。
- 必须明确作用到
a标签上，比如a { text-decoration: none; } - 如果用了
!important才生效，说明有更高优先级的样式在干扰，先查开发者工具里“Computed”面板看哪条规则赢了 - 别只写
:link，漏掉:visited、:hover、:active—— 用户鼠标移上去或点过之后下划线又回来了
为什么有时加了none还是有下划线
不是 text-decoration 没起作用，而是别的属性在“补刀”。比如：border-bottom、box-shadow 模拟的下划线，或者父容器设置了 text-decoration: underline，子元素继承后无法用 none 覆盖（CSS 文本装饰不支持完全取消继承）。
- 检查元素是否被父级的
text-decoration“传染”，此时得在a上显式设text-decoration: none+text-decoration-skip-ink: none（防止跳 ink 机制残留线段） - 留意 CSS 框架（如 Bootstrap）的
a默认样式，它可能在:hover里加了text-decoration: underline，你得一并重置 - 某些字体渲染下，
text-underline-offset太小会让线贴着文字底部，看起来像没去掉——其实还在，只是位置难察觉
要不要同时处理 focus 状态
要。键盘用户按 Tab 键聚焦链接时，浏览器默认会加下划线（或虚线框），这是可访问性刚需。单纯为了“视觉干净”而用 outline: none 会破坏无障碍体验。
- 保留
outline，但可以优化样式：比如a:focus { outline: 2px solid #007bff; outline-offset: 2px; } - 如果真想换掉下划线式 focus，用
text-decoration: underline配合text-underline-offset控制位置，比 outline 更统一 - 别用
outline: 0或outline: none一刀切，WCAG 不认这个
text-decoration 属性值有哪些坑
text-decoration 是复合属性，写 none 会清空所有装饰（underline、overline、line-through），但不会重置 text-decoration-color 或 text-decoration-thickness —— 这些得单独设，否则可能从父级继承奇怪的颜色或粗细。
立即学习“前端免费学习笔记（深入）”；
- 推荐用完整写法：
text-decoration: none currentColor thin，避免意外继承 -
text-decoration: unset在某些旧浏览器里不稳，不如明确写none - Firefox 对
text-decoration-skip-ink支持更早，Chrome 95+ 才稳定，做兼容要考虑
