标签上的文字装饰不起作用

Question

我正在尝试从 <a> 标签中删除所有 link 样式。我尝试了各种各样的事情，但没有任何效果。我可以让下划线消失，但访问过的 links 仍然保持不同的颜色。简单的解决方法是预先设置文本的颜色（并且可行），但我不想那样。我在这里重现了这个问题：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;
}

我错过了什么？感谢您提供任何有用的信息。

Answer 1

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

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

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

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

Answer 2

正如 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;
}

Answer 3

问题出在伪选择器 :link、:active 等方面。如果您只设置一组通用的 <a> 标记属性如下例所示，您将被设置。

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

关于文本修饰和颜色的附注：

text-decoration 属性不影响文字颜色。根据我的经验，保持颜色一致的最佳解决方案是将您的通用标签样式设置为包括 color: inherit;。这样，您的标签将始终是其父元素的任何颜色。

标签上的文字装饰不起作用

text-decoration on a tag not working

javascript

html

css

text-decorations