Question

我在chrome中遇到了一种奇怪的行为。 a：访问覆盖a：访问img，我不明白为什么。我已经检查了开发人员工具，它清楚地表明它是a：访问过，而不是任何其他样式或类。我想知道是什么导致我在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>

如果我将其更改为

，则访问过的颜色仍会覆盖它

.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;
}

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

Answer 1

也许试试img：访问？不确定是否：访问的工作方式与：悬停，但我想是的，所以它应该工作

Answer 2

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

访问过的图片链接伪类在Chrome中不起作用

2 个答案: