a: 访问过的 img { display: none; } [复制]答案

【问题标题】：a: visited img { display: none; } [duplicate]a: 访问过的 img { display: none; } [复制]
【发布时间】：2013-11-19 23:02:47
【问题描述】：

我的 HTML 代码如下所示：

<article class="post">
  <a class="thumbnail" href="#">
    <img width="200" height="100" src="some.jpg" class="attachment-thumbnail">
  </a>
  <header>
    <h2 class="posttitle">
      <a href="#">Posttitle</a>
    </h2>
  </header>
</article>

第一个链接中的图片只需要在链接未被访问时显示。如果链接被访问，我会做一个显示：无；

a:visited img {
  display: none !important;
  visibility: hidden !important;
  border: 1px solid red; * this is for testing*
}

http://jsfiddle.net/isherwood/rj394/2

但图像仍然显示。测试边框是红色的。如果我将 :visited 更改为 :hover 它会按应有的方式显示（:hover 并且它消失了）。 Firebus 告诉我，图像是“显示：无”，但显然不是……

有人知道这个问题并知道可能的解决方案吗？

【问题讨论】：

你能在jsfiddle.net复制它吗？
你不能在 CSS 中引用这样的元素......他需要成为下一个或成为 a 标签的孩子
你的 CSS 没有问题，但它不起作用。这是security feature。
很好的发现，但为什么你的答案不在答案中？
啊。太短且缺少代码或链接的答案有时会被系统移动。

标签： html css

【解决方案1】：

根据Mozilla的文档：

出于隐私原因，浏览器严格限制您可以应用的样式使用这个伪类选择的元素：只有颜色，背景颜色，边框颜色，边框底部颜色，边框左颜色，边框右颜色，边框顶部颜色，轮廓颜色、列规则颜色、填充和描边。另请注意， alpha 分量将被忽略：改为使用未访问规则（不透明度为 0 时除外，在在这种情况下，整个颜色被忽略，而未访问的颜色之一使用规则。

虽然颜色可以改变，但getComputedStyle方法会撒谎并始终返回未访问颜色的值。

因此，您无法更改 display 值。您可以看到 here 是如何使用与 border-color 不同的属性的。

您将不得不使用另一种方法，如 JavaScript + LocalStorage（主要是 supported）。

大致解决方案可能是，使用 jQuery：

$("a").on('click', function(){
    var $this = $(this);
    localStorage.setItem($this.attr('href'), true);
    $this.addClass('visited');
});

$( document ).ready(function() {
    $("a").each(function(index, elem){
        var item = $(elem);
        if (localStorage.getItem(item.attr('href'))){
            item.addClass('visited');
        }
    });
});

一个演示here。

【讨论】：

对于 JS 解决方案，可以使用本地存储来存储已访问的链接。当然，这对于旧版浏览器来说不是一个好的解决方案。

【解决方案2】：

因为:visited 保存在浏览器中，所以您可以为javascript点击的每个<a>设置Cookie，并将<img隐藏在里面。

【讨论】：