文本装饰不适用于已访问状态链接
Posted
技术标签:
【中文标题】文本装饰不适用于已访问状态链接【英文标题】：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（颜色、边框/轮廓等） .. 我在几分钟前看到了隐私问题限制，是的，文本装饰不在允许的样式属性列表中。 【参考方案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 之后。它遵循爱/恨原则。请通过此链接***.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 属性 [除了你提到的那些] 标记为已应用，而在这种情况下却没有。以上是关于文本装饰不适用于已访问状态链接的主要内容，如果未能解决你的问题，请参考以下文章
html 弹出窗口的GA事件 - 仅适用于按钮（不适用于文本或图像链接）
html 弹出窗口的GA事件 - 仅适用于按钮（不适用于文本或图像链接）
html 弹出窗口的GA事件 - 仅适用于按钮（不适用于文本或图像链接）
html 弹出窗口的GA事件 - 仅适用于按钮（不适用于文本或图像链接）