发布于 2年前

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

a标签内文本去掉下划线

要给a标签内的文本去掉下划线,只需要设置atext-decorationnone

例如:

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

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

html

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

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

<figure class="image"></figure>依葫芦画瓢,对p元素设置text-decorationnone

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;
}
CSS a
©2020 edoou.com   京ICP备16001874号-3