访问的图像链接伪类在 Chrome 中不起作用答案

【问题标题】：visited image link pseudo class does not work in Chrome访问的图像链接伪类在 Chrome 中不起作用
【发布时间】：2012-01-29 07:26:29
【问题描述】：

我在 chrome 中遇到了一个奇怪的行为。 a:visited 覆盖 a:visited img 我不知道为什么。我检查了开发人员工具，它清楚地表明它是 a:visited 而不是任何其他样式或类。我想知道是什么导致我在 chrome 中出现这种行为。这是我的链接和图片链接的css：

a {
    color:#046DAD;
    text-decoration:none;
}

a:visited {
    color:#304198;
}

a:hover {
    color:#39F;
    text-decoration:underline;
}

a:active {
    color:#ecc31b;
}

a img {
    border:1px solid #c1c1c1;
}

a:visited img {
    border:0px solid #c1c1c1;
    text-decoration:none;
    color:#c1c1c1;
}

a:hover img {
    border:1px solid #39f;
    text-decoration:none;
    color:#39f;
}

a:active img {
    border:1px solid #fbcb09; 
    text-decoration:none;
    color:#fbcb09;
}

HTML 结构：

<div class="content">       
<a href="x.html"><img src="x.jpg" alt=""/></a>
</div>

如果我将 a:visited 颜色更改为

.content a img {
    border:1px solid #c1c1c1;
}

.content a:visited img {
    border:0px solid #c1c1c1;
    text-decoration:none;
    color:#c1c1c1;
}

.content a:hover img {
    border:1px solid #39f;
    text-decoration:none;
    color:#39f;
}

.content a:active img {
    border:1px solid #fbcb09; 
    text-decoration:none;
    color:#fbcb09;
}

你们有遇到过类似的吗？

编辑：

<div class="content">       
    <a href="x.html" class="contentimage"><img src="x.jpg" alt=""/></a>
</div>

a:visited.contentimage {
    text-decoration:none;
    color:#c1c1c1;
}

所以我尝试使用上面的代码作为解决方法来覆盖每个图像链接的样式。这是我解决它的唯一方法。关于更简单的解决方法的任何想法？

【问题讨论】：

你确定这只发生在 Chrome 中吗？规则a.visited img 以img 元素为目标，而不是a 元素，因此它不应覆盖a.visited 规则
是的，它只发生在 Chrome 中。在 Firefox 和 IE 中它工作正常，访问的图像链接将只有 #c1c1c1 灰色边框而不是 #ecc31b 紫色边框。 IE 中唯一缺少的是活动伪类不起作用。
你从哪里得到#ecc31b？我在:active 看到了这一点，但这根本不应该影响:visited
CSS pseudo class combinations 的可能重复项

标签： html css

【解决方案1】：

也许可以试试 img:visited？不确定 :visited 的工作方式是否与 :hover 相同，但我猜是的，所以它应该可以工作

【讨论】：

【解决方案2】：

by styling a:visited a malicious website can find out where you've been 存在安全问题。目前，WebKit 允许:visited 链接的唯一样式规则是color。

【讨论】：