不透明度 a:visited

Question

我在Firefox和IE浏览器上无法使a:visited超链接的透明度起作用。

如果我设置a:visited的背景颜色，它可以正常工作，但是透明度无法设置。

有什么想法吗？

以下是我的CSS：

a.photo
{
    display: inline-block;
}
a.photo img
{
    border: 1px solid #C8C8C8;
    background-color: #ffffff;
}
a:hover.photo img, 
a:active.photo img {
    background-color: #FF2D59;
    border: 1px solid #FF2D59;
}
a:visited.photo img 
{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
a.small img
{
    width: 80px;
    height: 80px;
    padding: 6px;
}


<a href="#" class="photo small">
    <img src="http://www.w3schools.com/css/klematis.jpg" alt="small photo hyperlink" />
</a>

我认为CSS的顺序没有问题，因为如果我添加背景颜色，它能正常工作：

a:visited.photo img 
{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    background-color: Gray;
}

- George Filippakos

---

那不应该是 a.photo:visited 吗？ - Joel Etherton

@Joel Etherton：类和伪类可以以任何顺序排列，因此a:visited.photo是可以的。 - BoltClock

Answer 1

SEC7115：:visited和:link样式只能通过颜色不同来区分。某些样式未应用于:visited。

这是来自IE开发者工具控制台的信息。我相信Firefox也会显示类似的错误信息。

很抱歉，这里没有太多可做的。

- Niet the Dark Absol

---

你知道吗，我从来没有真正理解这个。你肯定可以读取computedStyle.color并找到已访问的链接吧？我不知道... - Niet the Dark Absol

我会不回答这个问题，以防还有其他解决方案。 - George Filippakos

看起来不太可能。无论是否存在已访问的链接，document.querySelectorAll(":visited") 都会返回一个空列表，因此无法找到它们。我将尝试搜索颜色样式。 - Niet the Dark Absol

尝试获取已访问链接的computedStyle会返回未访问链接的颜色。很抱歉，看起来没有解决方法。 - Niet the Dark Absol

谢谢你的帮助。我已经尝试更改不同的值，但只有背景颜色和边框颜色可以更改。 - George Filippakos

Answer 2

自2010年以来，Mozilla浏览器限制可以用于样式化已访问链接的CSS属性为： - 颜色， - 背景颜色， - 边框-*-颜色 - 轮廓颜色 - 填充和描边属性的颜色部分。

对于已访问链接样式中的其他部分，将使用未访问链接的样式。此外，对于您可以更改的属性列表，您将无法在它们上设置rgba()或hsla()颜色或透明度。

来源： http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

- user1171440