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

【问题标题】：text-decoration on a tag not working标签上的文字装饰不起作用
【发布时间】：2016-03-11 02:24:40
【问题描述】：

我正在尝试从 <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;
}

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

【问题讨论】：

text-decoration 只是去掉了下划线，而不是颜色。
但不应该 a:visited text-decoration:none 基本上否认任何 textdecoration 吗？
是的，但text-decoration 只处理下划线。
废话。细则……谢谢！

标签： javascript html css text-decorations

【解决方案1】：

正如 Wowsk 上面提到的，text-decoration 是指下划线，而不是颜色。你需要一个单独的规则：

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

【讨论】：

这不是我在回答中所做的吗？

【解决方案2】：

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

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

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

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：