如果访问了锚标记的父元素，则设置其样式

Question

我已经使用HTML很长一段时间了，从来没有真正做过这样的事情。 我在段落标记中有一个锚 标记 ，如下所示：

<p>Hello <a href="path/page.html">World</a></p>

我在想，如果有改变风格的方式p元素，如果a已经被访问过，只是用普通的CSS。 我知道JavaScript可以做到这一点，如果你愿意参考，可以随意发布一个Vanilla JS答案，但我的问题实际上是关于如何使用CSS来做到这一点。

因为我预测有人会说“父母标签真的有必要吗？” ，我知道HTML5和CSS3为样式和操作内容带来了全新的方式，而不需要额外的标签，但这不是问题的关键。 重点是如果有人需要（在我的情况下，我这样做）如何做到这一点 。

Answer 1

这里有几个问题在起作用。

1. 您无法使用纯CSS执行此操作，因为目前它们不是父选择器。 正如Hashem上面提到的， 它目前已包含在CSS4的工作草案中 。
2. 诸如此类的问题表明，可以使用JavaScript来检查链接的颜色，例如，并从中推断出链接被访问。 但是，我刚试过Firefox 27，它不再适用于我。 我推测它被视为一个安全问题，因为您可能会利用它来计算用户的特定互联网历史记录。

最初，我建议使用::before选择器来尝试实现某些功能，但经过一番挖掘后，我遇到了这篇文章 （以及SO的答案） ，这可能会引起感兴趣的阅读。

请参阅此JSFiddle （ 更新 为本机JS ）以了解我的工作原理。 值得注意的是，我确实尝试了上面回答中提到的本机JavaScript检查，以及在jQuery中使用:visited选择器，但都没有工作。

JS

var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i ++) {
    var anchor = anchors[i];
    console.log(document.defaultView.getComputedStyle(anchor, null).getPropertyValue('color'));       
}

HTML

<p>
    <a href="http://google.com">Google</a>
</p>
<p>
    <a href="http://nowayjose.com">Never visited</a>
</p>

CSS

a { color: #00FF00; }
a:visited { color: #FF0000; }

如何潜在的安全隐患! CSS4中的选择器会发挥作用:visited规则非常有趣，因为您可以设置不同的元素，然后可能会查询该元素的样式。