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

Question

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

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

我想知道如果a 已经被访问过，是否有办法改变p 元素的样式，只使用CSS。我知道 JavaScript 可以做到这一点，如果您愿意，请随时发布 Vanilla JS 答案以供参考，但我的问题实际上是关于如何使用CSS。

既然我预测有人会说 “父标签真的有必要吗？”，我知道 HTML5 和 CSS3 带来了全新的无需额外标签即可设置样式和操作内容的方法，但这不是问题的重点。关键是如果有人需要（在我的情况下，我确实需要），该怎么做。

Answer 1

这里有几个问题。

1. 您不能使用纯 CSS 执行此操作，因为目前它们没有父选择器。正如上面提到的哈希姆，it is currently included in the working draft for CSS4。
2. Questions such as this 建议可以使用 JavaScript，例如检查链接的颜色，并从中推断出链接已被访问。但是，我刚刚尝试过 Firefox 27，它不再适合我。我推测这被视为一个安全问题，因为您可能会利用它来计算用户的特定互联网历史记录。

最初我建议使用::before 选择器来尝试实现某些目标，但经过一番挖掘后，我发现了this article (and this answer from SO)，这可能会让我感兴趣。

See this 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 规则一起发挥作用的潜在安全隐患非常有趣，因为您可以设置不同元素的样式，然后可能会查询该元素的样式。