不透明度 a：已访问

Posted 2023-03-06

【中文标题】不透明度 a：已访问

【英文标题】：opacity a:visited

【发布时间】：2022-01-13 01:51:19

【问题描述】：

我无法在 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"  />
</a>

我不认为 CSS 的顺序有什么问题，因为如果我添加背景颜色，它就可以正常工作：

a:visited.photo img 

    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    background-color: Gray;

【问题讨论】：

不应该是a.photo:visited吗？

@Joel Etherton：类和伪类可以按任意顺序排列，所以a:visited.photo 很好。

【参考方案1】：

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

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

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

【参考方案2】：

SEC7115: :visited 和 :link 样式只能在颜色上有所不同。某些样式未应用于 :visited。

这来自 IE 的开发者工具控制台。我很确定 Firefox 会显示类似的错误。

对不起。那里没有什么可以做的。

【讨论】：

你知道，我从来没有真正理解这一点。您肯定可以阅读 computedStyle.color 并找到访问过的链接吗？我不知道...

我不会回答这个问题，以防万一有其他解决方案。

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

尝试获取已访问链接的computedStyle 会返回未访问链接的颜色。抱歉，但似乎没有解决方法。

感谢您的帮助。我试过改变不同的值，只有背景颜色和边框颜色可以改变。