如何利用：访问父元素？

Question

我基本上都有一个内容列表，这些内容全部转到外部网址（它在新窗口中打开）。截至目前，我有一个：访问设置为灰色，虽然我真正喜欢的是整个列表项（包含他们点击的锚链接），以降低不透明度。

您可以在reddit上看到此行为。

比如说你有

<div class="item">
  <a href="http://google.com">Click me</a>
</div>

然后你有很多行.item

我想要它，以便当您点击链接时，整个div可以“看到”：已访问状态，因此.item设置为opacity: .5;，而不是仅仅文本转向灰色。

有没有办法用JS或css做到这一点？

Answer 1

这不是您技术问题的完全解决方案，但是可以改变您的结构以使<a>满足<div>父母的风格需求吗？

换句话说，杀死<div>，然后使用<a>。这样，当它“被访问”时，你可以做任何你想做的事情。

Answer 2

jQuery中似乎没有:visited选择器。看看这个插件包含它： http://remysharp.com/2008/02/25/visited-plugin/

使用此插件，您可以使用以下任一方式实现此效果：

$("a").visited().each(function() {
    $(this).parent().css("opacity", "0.5");
});

或者这个：

$(".item").filter(function() {
    return $(this).find("a").visited().length;
}).css("opacity", "0.5");

Answer 3

支持CSS4 selectors后（假设现有草案被接受类似于其当前形式的内容），

div.item! > a:visited

将选择已访问div的{​​{1}}个班级的父item。

在此之前，cssParentSelector可能有用。