【问题标题】：text-decoration not working for visited state link文本装饰不适用于已访问状态链接
【发布时间】：2016-05-04 00:44:31
【问题描述】：

我是 CSS 的新手，并试图了解链接如何因状态更改而被修改。在我的场景中，当链接处于 visited 状态时，我想将 text-decoration 更改为 line-through。但是，无论是在 Mozilla 还是 Chrome 浏览器上，当链接处于 visited 状态时，text-decoration 的文本内容都不会更新为 line-through ，如下图。我哪里做错了？

当链接状态变为visited而text-decoration保持不变时，请通知颜色已更新（变为绿色）；

注意：Mozilla 有一个关于同一问题的错误报告：Mozilla Bug #645786 和错误报告。 tag.class:state selector (a.:visited) 也会出现问题（参见 Demo #2）

演示#1

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:link {
                color: red;
                text-decoration: none;
            }

            a:visited {
                color: green;
                text-decoration: line-through;
            }

            a:hover {
                color: blue;
            }

            a:active {
                color: yellow;
            }
        </style>
    </head>
    <body>
        <p>
            <b>
                <a href="http://google.com" target="_blank">This is a link</a>
            </b>
        </p>
    </body>
</html>

Demo #2 --Selector 类

<!DOCTYPE html>
<html>
    <head>
        <style>
            a.linkClass:link {
                color: red;
                text-decoration: none;
            }

            a.linkClass:visited {
                color: green;
                text-decoration: line-through;
            }

            a.linkClass:hover {
				color: blue;
            }

            a.linkClass:active {
				color: yellow;
            }
        </style>
	</head>
    <body>
        <p>
            <b>
                <a class="linkClass" href="http://google.com" target="_blank">This is a link</a>
            </b>
        </p>
    </body>
</html>

【问题讨论】：

我认为这与：dbaron.org/mozilla/visited-privacy.. text-decoration is no option voor voor style the 'visited-state'..
很奇怪，如果是这样，为什么颜色会更新，而不是 text-decoration 属性？顺便说一句，你是荷兰人吗？你使用了 'voor' 而不是 'for' :)
哈，是的，我是荷兰人.. 我没有仔细阅读它，但似乎只有几个属性可以用于 :visited state（颜色、边框/轮廓等） ..
我在几分钟前看到了隐私问题限制，是的，文本装饰不在允许的样式属性列表中。

标签： html css google-chrome firefox text-decorations

【解决方案1】：

你可以用这个 jquery addClass 来完成。

演示代码

$('a').click(function(){
    $(this).addClass('visited');
});

CSS

.visited {
  color: green;
  text-decoration: line-through;
}

小提琴演示：https://jsfiddle.net/nikhilvkd/7y2fyytw/

【讨论】：

您好，您已将它们按正确顺序排列，a:link { color:yellow; } a:visited { 颜色:红色; } a:hover { 颜色:粉红色; } a：活动 { 颜色：黑色； }
我不是在寻找 jQuery 答案，我的意思是学习纯 htm/css 解决方案。问题用 html/css 标记，这是 CSS 的一个非常基本的原始属性。
@Srinivas R : 在链接属性之后已经访问过？
@LeventDivilioglu 为了有效，记住 a:hover 必须在 CSS 定义中的 a:link & a:visited 之后。它遵循爱/恨原则。请通过此链接stackoverflow.com/questions/569268/…
@Srinivas R ：即使我有 LV（部分正确），我也添加了 Hover 和 Active 状态，它仍然是一样的。

【解决方案2】：

 <a href="http://www.google.com" target="_blank">google</a>
<style>
a:link             
 {  
color:red;
 }
a:visited    
    { color:yellow;
}
a:hover     
      { color:blue; }
a:active            { color:orange; }
</style>

【讨论】：

不是这样，问题出现在访问状态的文本装饰属性上。
text-decoration 属性在访问的代码中无法正常工作。它忽略了 text-decoration 属性。请通过此链接bugzilla.mozilla.org/show_bug.cgi?id=645786

【解决方案3】：

访问链接的样式有限制；

访问链接样式的限制

您仍然可以对访问的链接进行可视化样式设置，但是有现在限制了您可以使用的样式。只有以下属性可以应用于访问过的链接：
color
background-color
border-color (and its sub-properties)
outline-color
The color parts of the fill and stroke properties

Privacy and the :visited selector

由于用户的隐私问题，不允许使用text-decoration 样式。

【讨论】：

100% 准确，您的回答本可以为我节省大量时间。 :) Webkit 和 Firefox 的 CSS 检查员将 :visited 属性 [除了你提到的那些] 标记为已应用，而在这种情况下却没有。