CSS中text-decoration:none值的用途及使用必要性咨询

你觉得忽略text-decoration属性和设置none效果一样，其实这只在元素没有默认或继承的文本装饰样式时才成立。很多HTML元素自带默认的text-decoration，所以这个声明的作用远不止“无效果”：

• 覆盖元素默认样式：最典型的就是链接（<a>标签），浏览器默认会给链接加上下划线。如果设计里不需要这个下划线，就必须用text-decoration: none;来覆盖默认样式，比如：

  a {
    text-decoration: none;
  }
  

  类似的，<del>、<s>标签默认带删除线，<ins>默认带下划线，要是想去掉这些默认装饰，也得用这个声明。

• 清除继承的样式：文本装饰是会继承的，如果父元素设置了text-decoration: line-through（删除线），子元素默认也会带上这个样式。这时候给子元素单独设置text-decoration: none;，就能清除掉继承来的装饰，让子元素文本恢复正常。

• 明确样式意图：有时候即使当前元素没有默认或继承的装饰，主动声明none也能清晰传达你的设计意图——这个元素就是不需要任何文本装饰。这样后续维护样式的开发者能一眼看懂，避免误加不必要的装饰效果。

内容的提问来源于stack exchange，提问作者zaraterdz