如何使用带有图片的伪类“：visited”样式化元素？

Question

我在这里想实现的是：

1. 我想要一个橙色正方形，并将“打印”作为未被点击时的状态。
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>

- Chris Brennan

Answer 1

为了保护隐私，浏览器严格限制了使用 :visited 伪类选择的元素所能应用的样式。可应用的 CSS 属性仅限于以下属性：

• color（颜色）
• background-color（背景色）
• border-color（边框颜色）
• border-bottom-color（底部边框颜色）
• border-left-color（左侧边框颜色）
• border-right-color（右侧边框颜色）
• border-top-color（顶部边框颜色）
• outline-color（轮廓线颜色）
• column-rule-color（列规则颜色）
• fill（填充颜色）
• stroke（描边颜色）

同时请注意，alpha 透明度组件将被忽略。除非透明度为 0，否则使用未访问规则的 alpha 组件（在这种情况下，整个颜色都将被忽略，并使用未访问规则的颜色）。

参考链接：https://developer.mozilla.org/en-US/docs/Web/CSS/:visited 更多信息可参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector

- Axel