去掉a标签内部元素文本的下划线

a标签内文本去掉下划线

要给a标签内的文本去掉下划线，只需要设置a的text-decoration为none

例如：

a，a:hover {
     text-decoration: none;
}

a标签内元素设置text-decoration:none 问题

html

<a>
  <p>hello word</p>
<a>

这样p标签内的文字页会出现下划线：

依葫芦画瓢，对p元素设置text-decoration为none：

p，p:hover {
     text-decoration: none;
}

结果，p元素内的文字仍然有下划线。

原因分析与解决

查了text-decoration的使用：

text-decoration CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线  或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。

文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性，子元素则不能将其删除。

也就是说父元素a标签默认设置text-decoration: underline，单独设置子元素p是无效的。

解决方案就很清晰了，直接对父元素a标签设置text-decoration: none即可。

a {
     text-decoration: none;
}