jquery - 我如何使用 CSS 根据链接是否被访问来更改 jQuery 生成的类分配？

Question

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

//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(它是一个 sprite):

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 做了一个 fiddle 。谁能指出我哪里出错了？我永远不会变红/访问申请。 http://jsfiddle.net/Lera/zLyMn/4/

Answer 1

您应该能够像这样使用相邻的选择器来选择该跨度:

a:visited + span.external_link { }

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