CSS 去掉下划线：文字、链接、列表和输入框

“去掉下划线”在 CSS 里不是一个属性能全部解决的，文字下划线、链接下划线、列表符号、输入框底线，对应的写法各不相同。这里按场景列一下。

文字和链接的下划线

文字下划线统一由 text-decoration 控制：

.no-underline { text-decoration: none; }

/* 只去掉下划线，保留删除线和上划线 */
.mixed { text-decoration: line-through; }

链接的默认下划线来自浏览器 User Agent 样式，覆盖掉即可：

a { text-decoration: none; }

如果写了没反应，绝大多数是权重问题。检查有没有 #nav a、a:link 这类更高优先级的选择器，或者伪类 a:hover 单独设置了 text-decoration。

子元素取消不了父级下划线

.title { text-decoration: underline; }
.title span { text-decoration: none; } /* 无效 */

下划线是父元素“画”出来的，子元素无法用 none 擦掉。正确做法是把下划线下放到具体需要的那一层，或者改用 border-bottom、::after 模拟。

列表前面的符号

这属于列表样式，不是 text-decoration：

ul { list-style: none; margin: 0; padding: 0; }

常见坑是只写了 list-style: none，但 ul 的默认左内边距还在，看起来像没对齐。要把 padding 一起清掉，再手动设置缩进。

输入框的底线

input 的边框不是下划线，但视觉上很像，去掉用 border：

input {
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
}

outline 是聚焦时浏览器画的框，和 border 是两回事。只写 border: none 后聚焦仍有蓝框，就是 outline 没处理。为了无障碍，最好换成自定义的聚焦样式，而不是完全去掉。

表格和分隔线上的下划线

有的旧代码用 text-decoration: underline 给表头加分隔线，这属于误用。表头分隔应该用 border-bottom，因为它不会影响文字行高，也不会被子元素继承。