造型a：访问过的链接

我正在寻找样式：在文章列表中访问过的链接。目前，这可以正常工作，将CSS中的颜色应用于访问过的链接，但是，我更喜欢一些东西。我想在访问时在文章标题旁添加一个小点。造型a：访问过的链接

我已经做了一些研究，看起来像以外的其他应用颜色：访问链接不工作（背景/背景图像支持已被删除，由于隐私问题??）所以我想知道如果有人有任何提示或想法？ jQuery的？

2013-01-16 John the Painter

这个作品，我知道，因为我已经尝试过了。虽然它在Chrome中似乎不起作用，但它在IE中起作用，所以它不是CSS的问题。

<style> 
a:link 
{ 
    color: #f00; 
} 
a:visited 
{ 
    color: #0f0; 
} 
a:hover 
{ 
    color: #00f; 
} 
a:active 
{ 
    color: #ff0; 
} 
</style> 
<a href="x" target="_blank">X</a>

那么试试这个在IE中：

a:visited:before 
{ 
    content: "."; 
}

如果这个心不是足够了，你就会有某种click事件添加到您的链接，并从那里他们的风格，例如（用了jQuery ，丑得要命虽然）：

<a href="javascript:void(0)" onclick="$(this).html('.Link');">Link</a>

来源

2013-01-16 11:44:45 netigger

哈弗正常工作，因为它会与背景图像等做的，但是这未能就工作：访问过的链接。感谢迄今虽然:) –

那么，不知道你在那之后。这正是你所要求的。 – netigger

不，它没有，因为它不起作用。 –

您可以<a>元素之后放置一个<span>元素。隐藏这个元素。并像这样做一个CSS选择器：visited + span ...就像这样。有关css选择器访问的更多信息http://www.w3schools.com/cssref/css_selectors.asp 与jquery有更多的选择器，例如选择器。父母..但你会发现这些东西在网络中肯定。

来源

2013-01-16 11:47:19 JuHwon

嗨，你可以为访问的链接图像。例如，

a:visited { 
    padding-left: 14px; 
    background: url(images/checkmark.gif) left no-repeat; 
}

来源

2013-01-16 11:52:28 jeeva

几年前，你可以......不是现在:( –

@rdck可能是..但选择器：之前：在ie6中不支持选择器之后（Internet Explorer 6不支持非锚点伪类）。但是这种方式也会在ie6中工作！ :) – jeeva

在这种情况下，你要通过脚本风格，而不是简单的CSS jQuery的不支持的伪类选择像:visited。你必须使用普通的JavaScript，而不是

$(document).ready(function() 
{ 
    $("#StyleAnchors").click(function() 
    { 
     //works 
     $("a").css("background-color", 'yellow'); 
     //doesn't works 
     $("a:visited").css("background-color", 'red'); 

    //works 
    document.styleSheets[0].addRule('a:visited', 'color: green'); 
    //document.styleSheets[0].insertRule('a:visited{background-color: #00f;}'); 
    }); 
});

http://jsfiddle.net/prJUt/

来源

2013-01-16 12:04:23

首先，原因，你应该改变你要通知用户的做法，一个链接已被访问：https://stackoverflow.com/a/10320628/2943403

因为更大的浏览器行业有通过限制访问链接被修改/样式化的方式来采取特定步骤来打击安全漏洞，如果您推出自己的JavaScript实现，它可能会引起用户怀疑您的网页/网站存在轻度缺陷。

此外，只要您的“未访问”文本颜色不是灰色，我认为造型visited链接灰色应该是相当直观的。出于这个原因，我会敦促你（和未来的SO读者）应用这个简单的纯CSS解决方案，并放弃任何想法，以不同的风格。

a{color:red;} 
 

 
a:visited{color:grey;}

<a href="#">run snippet & click link to see effect</a>

来源

2017-04-02 01:04:10 mickmackusa

@JohnthePainter我希望我的答案吸引你的敏感。如果您觉得这是最好的答案，请给它一个绿色的勾号，以便将来的SO读者不必阅读页面上的每个答案就能找到最合理的答案。 – mickmackusa

造型a：访问过的链接

回答

相关问题