链接的下划线怎么也去不掉，a 标签上明明写了 text-decoration 的 none。打开开发者工具一看，这行样式被划掉了，说明有更高优先级的规则在起作用，或者下划线根本不在这个元素上。

text-decoration 是复合属性，拆开有三个子属性：line 控制线型，比如 underline、line-through、none；style 控制实线虚线；color 控制线的颜色。还有 thickness 管粗细，text-underline-offset 管线和文字的距离。

去不掉的常见原因

  • 选择器权重：a:hover 或者框架的 .btn a 权重更高，写在后面的覆盖前面
  • 装饰线会向下传递：父元素加了 underline，子元素写 none 也取消不了，这是规范行为
  • 不是下划线：可能是 border-bottom，或者 inset 的 box-shadow，看着一样但不是这个属性
  • 浏览器默认样式：没重置 a 的默认值，Chrome 里就是带下划线

第一条和第二条最容易浪费时间。看到样式被划掉就去找优先级，看到样式没被划掉就往上翻父元素，两个方向各试一次，基本能定位。

让它细一点、远一点

a{ text-decoration-line: underline; text-decoration-color: #999; text-decoration-thickness: 1px; text-underline-offset: 3px; }

这几项在现代浏览器都支持，旧版本 IE 只认简写。如果项目还要兼容很老的浏览器，用 border-bottom 加 padding-bottom 模拟更稳，缺点是行高会受影响，需要额外调。改动之前量一下设计稿的行高，别把列表挤歪。

还有个容易忽略的点，text-decoration 的颜色默认跟随文字颜色，改 hover 文字色时下划线也跟着变。想单独控制就显式写 text-decoration-color，别指望它继承别的值。

做设计还原时，设计稿上的下划线往往比默认的细，距离也大。别用图片或者伪元素硬画，先用这几条属性调，调不出来再考虑 border。能用原生的地方用原生，后面改主题色才不用挨个改图。