1

我们使用正则表达式来确定链接是指向内部页面还是外部页面。如果链接指向外部页面，则分配一个类，该类将外部页面图标附加到链接上。这是正则表达式：

//Identify external links
jQuery("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external");
//Append span to display Icon
jQuery('#content1 a.external').append('<span class="external_link" />');

我可以使用我的 CSS 根据是否访问过相关链接来更改应用的图标吗？[即，如果链接已被访问，则外部链接图标是不同的颜色，就像链接本身的行为一样]

我真的不认为它可以在 CSS 中完成。我的理由是，jQuery 会根据链接的类型来分配类，而不管链接是否被访问过。因此，无法将伪类 :visited 分配给由 jQuery 正则表达式创建的 span 类。

但也许有人知道我没有想到的一个巧妙的 CSS 技巧——诚然，这并不难做到。

我的未访问图标的 CSS（它是一个精灵）：

span.external_link { 
background: url(/hslc/global/icons/icon-external.gif) no-repeat scroll left top transparent; 
display: inline-block; 
height: 10px; 
line-height: 16px; 
margin: 0 0 0 0.25em; 
padding: 0; width: 10px; }

图标的访问版本的 CSS，它不起作用：

a:visited span.external_link { background-position: 0 -100px }

如果您想查看一个示例，此页面包含一个示例。视频正下方的链接显示了一个外部链接图标正在做它的事情...... http://eclkc.ohs.acf.hhs.gov/hslc/tta-system/teaching/center/practice/ISS/zone.html

谢谢！

在评论中使用 BoltClock 的链接，我发现背景图像不能再用于设置访问链接的样式了。可以使用颜色。所以我使用了下面的 Baron 解决方案和 X + Y 选择器来写这个：

span.external_link::after  { 
content:    "<- unvisited!"; 
color:      green; }  

a:visited + span.external_link::after {  
content:    "<- visited!"; 
color:      red; }

我只收到绿色/未访问的文本。我不能红/访问显示

我做了这个确切的 CSS 的小提琴。谁能指出我哪里出错了？我永远无法获得红/访问申请。 http://jsfiddle.net/Lera/zLyMn/4/

4

2 回答 2

1

您应该能够使用相邻的选择器选择该跨度，如下所示：

a:visited + span.external_link { }

见这里： http: //net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

于 2013-09-16T17:03:43.937 回答
0

您可以做的最好的事情是将链接的某些 css 属性与其是否具有已访问链接的样式进行比较，然后调整您需要的任何内容以反映这一点：

CSS：

a:visited { color: red;}

JS：

if($("a").css("color") == "rgb(0, 0, 238)") {
    $("div").text("Link was visited");
}

请检查小提琴：

JSFIDDLE

于 2013-09-16T17:02:30.313 回答