如何使用带有图像的伪类“：visited”来设置元素的样式？

Question

我想在这里实现的目标：

1. 我想要一个带有"print"的橙色方块作为未触及状态。
2. 翻身时我希望出现女孩图像。
3. 点击后我希望女孩图片保持访问状态

我得到的只是翻转状态，没有访问状态。

http://codepen.io/Chris-Brennan/pen/eNaxQY?editors=110

.dwight:hover {
  content: url('http://s18.postimg.org/eadl79djp/dwight.png');
}
.dwight:visited {
  content: url('http://s18.postimg.org/eadl79djp/dwight.png');
}

<a class="dwight" href="#"><img src="http://s16.postimg.org/ph8f6jedt/print.png"/></a>

Answer 1

出于隐私原因，浏览器严格限制您可以使用由 :visited-pseudo-class 选择的元素应用于以下 CSS 属性的样式：

• 颜色
• 背景颜色
• 边框颜色
• 边框底部颜色
• 左边框颜色
• 右边框颜色
• 顶部边框颜色
• 轮廓颜色
• 列规则颜色
• 填充
• 行程

另请注意，alpha 分量将被忽略。使用未访问规则的 alpha 组件代替（当不透明度为 0 时除外，在这种情况下，整个颜色将被忽略，并使用未访问规则之一。

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector