2

我希望在文章列表中设置 a:visited 链接的样式。目前，这可以很好地将我的 CSS 中的颜色应用于 a:visited 链接，但是，我需要更多的东西。访问时，我想在文章标题旁边添加一个小点。

我做了一些研究，看起来除了对 a:visited 链接应用颜色之外的任何东西都不起作用（由于隐私问题，背景/背景图像支持已被删除？？）所以我想知道是否有人有任何提示或想法？jQuery？

4

5 回答 5

2

如果您想通过脚本而不是纯 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-16T12:04:23.603 回答
1

这行得通，我知道这是一个事实，因为我已经尝试过了。虽然它似乎在 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: ".";
}

如果这还不够，您将不得不向您的链接添加某种点击事件并从那里设置它们的样式，例如（使用 jQuery，虽然丑陋）：

<a href="javascript:void(0)" onclick="$(this).html('.Link');">Link</a>
于 2013-01-16T11:44:45.697 回答
0

您好，您可以为访问过的链接提供图片。例如，

a:visited {
     padding-left: 14px;
     background: url(images/checkmark.gif) left no-repeat;
}
于 2013-01-16T11:52:28.777 回答
0

您可以在<span>元素之后放置一个<a>元素。隐藏这个元素。并制作一个像这样的 css 选择器 a:visited+span... 这样的东西。有关 css 选择器的更多信息，请 使用 jquery访问http://www.w3schools.com/cssref/css_selectors.asp您可以使用选择器获得更多选择，例如父级.. 但您肯定会在网络上找到这些东西。

于 2013-01-16T11:47:19.767 回答
0

首先，您应该更改通知用户链接已被访问的方法的原因：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-02T01:04:10.393 回答