如何为带有图像的伪类“：visited”的元素设置样式？答案

【问题标题】：How to style element with pseudoclass ":visited" with an image?如何为带有图像的伪类“：visited”的元素设置样式？
【发布时间】：2019-11-22 23:53:29
【问题描述】：

我在这里想要实现的目标：

我想要一个带有“打印”的橙色正方形作为未触及状态。
翻滚时，我希望出现女孩图像。
点击后我希望女孩图片保持访问状态。

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

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');
}

&lt;a class="dwight" href="#"&gt;&lt;img src="http://s16.postimg.org/ph8f6jedt/print.png"/&gt;&lt;/a&gt;

【问题讨论】：

标签： html css image pseudo-class rollover

【解决方案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

【讨论】：