CSS嵌套元素访问失效求助：已访问链接内图片样式不生效

这个问题其实是浏览器隐私保护机制导致的——为了防止网站通过检测元素样式来获取你的浏览历史（这是个很严重的隐私泄露风险），浏览器对:visited伪类能修改的CSS属性做了严格限制。

为什么你的第二段CSS无效？ #

浏览器只允许:visited修改以下几类属性：

• color
• background-color
• border-color（包括各边的独立border-color）
• outline-color
• text-decoration-color
• text-emphasis-color

像opacity这类非上述列表的属性，或是直接给嵌套子元素（比如img）设置样式的操作，都会被浏览器拦截，所以div.someid2 a:visited img { opacity: 0.25; }自然不会生效。

可行的解决方案：利用父元素滤镜影响子元素 #

既然不能直接修改img的样式，我们可以把滤镜效果应用在:visited的<a>标签上，因为滤镜会被子元素继承，从而让图片呈现灰色半透明的效果：

div.someid1 a:visited { 
  color: #666666; 
}
div.someid2 a:visited {
  /* 先转成灰度图，再叠加透明度 */
  filter: grayscale(100%) opacity(0.25);
}

这样当链接被访问后，<a>标签的滤镜会作用于内部的图片，完美实现你要的“标记已点击”的视觉效果。

补充说明 #

• 不要尝试用JavaScript读取:visited相关的样式，浏览器会强制返回未访问状态的样式值，同样是出于隐私保护的考虑。
• 如果需要更复杂的视觉效果，也可以结合:visited修改<a>的background属性，再通过定位让背景覆盖图片，但滤镜的方式无疑是最简洁高效的。

内容的提问来源于stack exchange，提问作者NewProger