javascript - 如果访问 anchor 标记，则设置其父元素的样式

Question

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

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

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

因为我预测有人会说类似“父标签真的有必要吗？”，我知道 HTML5 和 CSS3 带来了全新的无需额外标签即可设置样式和操作内容的方法，但这不是问题的重点。重点是如果有人需要(在我的情况下，我确实需要)。

Answer 1

这里有几个问题。

1. 您不能使用纯 CSS 来做到这一点，因为目前它们还没有父选择器。正如 Hashem 上面提到的，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 规则的潜在安全隐患非常有趣，因为您可以为不同的元素设置样式，然后可能查询该元素的样式。