标签上的文本修饰不起作用

text-decoration on a tag not working

本文关键字：不起作用 文本 标签      更新时间：2023-09-26

我正在尝试从<a>标签中删除所有链接样式。我尝试了各种各样的事情，但没有任何效果。我可以让下划线消失，但访问过的链接仍然保持不同的颜色。简单的解决方法是预先设置文本的颜色（并且有效），但我不希望这样。我在这里重现了这个问题：https://jsfiddle.net/qod4dz5x/

我假设这与我在<a>标签中有一个<h2>标签有关？

<a href="http://google.com"><h2>
Google
</h2></a>

a:link {
    text-decoration: none !important;
}
a:visited {
    text-decoration: none !important;
}
a:hover {
    text-decoration: none !important;
}
a:active {
    text-decoration: none !important;
}

我错过了什么？感谢您的任何有用意见。

正如Wowsk上面提到的，文本装饰是指下划线，而不是颜色。为此，您需要一个单独的规则： 

a:visited {
    text-decoration: none;/*important is not necessary here or in any of the other psuedo selectors */
    color:black;/* or any color*/
}

或者，您可以只设置<a>标签的颜色，无论如何都会覆盖伪选择器： 

a {
    color:black;
    text-decoration:none;
}

一切似乎都正常。您可以为访问的颜色设置颜色，与原始颜色相同。我认为没有其他方法可以做到这一点。

a:link {
    text-decoration: none;
    color:black;
}
a:visited {
    text-decoration: none;
    color:black;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}

问题出在伪选择器 ：link、：active 等上。如果您只设置一个常规<a>标签属性集，如下例所示，您将被设置。

a {
  text-decoration: none;
  color: black;
}

关于文本装饰和颜色的一个旁注：

文本

修饰属性不影响文本颜色。根据我的经验，一致颜色的最佳解决方案是将常规标签样式设置为包含颜色：继承;。 这样，您的标签将始终是其父元素的任何颜色。

相关文章：