Question

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

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

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

因为我预测有人会说像这样的内容吗？“父标记真的有必要吗？”，我知道 HTML5 和 CSS3 带来全新的在不需要额外标签的情况下对内容进行样式和操作的方法，但这不是问题的关键。关键是如果需要（在我的情况下，我做），该怎么做。

Answer 1

这里有几个问题。

您无法使用纯CSS执行此操作，因为目前它们不是父选择器。正如Hashem上面提到的，it is currently included in the working draft for CSS4。
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规则一起发挥作用的潜在安全隐患非常有趣，因为您可以设置不同的元素，然后可能会查询该元素的样式。

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

1 个答案: