:visited 伪类对 无效，因浏览器隐私限制仅允许作用于 且禁用 filter；可靠方案是用 javascript 结合 localstorage 或 class 切换实现点击灰度效果。
:visited 不能用于 <img> 元素，这是关键前提——直接用 :visited 给图片加灰度滤镜根本不会生效。
为什么 :visited 对 <img> 无效
浏览器出于隐私保护限制，:visited 伪类只允许作用于 <a></a> 标签，且仅支持极少数 CSS 属性（如 color、background-color 等），filter 明确被禁止。哪怕把 <img> 套在 <a></a> 里，对 <img> 自身写 a:visited img { filter: grayscale(1); } 也无效——因为该规则依赖父元素状态，而浏览器会忽略此类“穿透式”样式。
真正可行的方案：用 :visited 控制父链接，再联动控制图片
必须借助 <a></a> 的 :visited 状态，通过属性继承或兄弟/子元素选择器间接影响图片。但注意：现代浏览器（Chrome ≥120、Firefox ≥115）已进一步收紧，连 a:visited + img 或 a:visited img 这类组合选择器对 filter 的应用也基本屏蔽。
- 唯一稳定可用的方式是：把图片作为
<a></a>的背景图，再对a:visited设置filter - 或者放弃
:visited，改用 JavaScript 记录点击并添加 class（推荐） - 若坚持纯 CSS，可退而求其次，对
a:visited改变边框、透明度等被允许的属性，但无法可靠触发灰度
更可靠的做法：用 JavaScript 手动标记已点击图片
绕过浏览器限制，用事件监听 + localStorage 或 class 切换实现真实“点过即灰”效果：
document.querySelectorAll('a[data-track-img]').forEach(link => {
const img = link.querySelector('img');
if (!img) return;
// 从 localStorage 恢复状态
const key = `img-visited-${link.href}`;
if (localStorage.getItem(key)) {
img.style.filter = 'grayscale(1)';
}
link.addEventListener('click', () => {
localStorage.setItem(key, '1');
img.style.filter = 'grayscale(1)';
});
});
- 必须给
<a></a>加data-track-img等标识，避免误操作其他链接 - 不要用
img.classList.add()配合 CSS 类，除非你确保该 class 不依赖:visited触发 -
localStorage是持久化的，适合跨会话；若只需单页内有效，用Set存 URL 即可
兼容性与边界提醒
即使用了 JS 方案，也要注意几个容易被忽略的点：
- 如果图片是懒加载（
loading="lazy"），首次点击时可能尚未渲染，需监听load事件后再绑定逻辑 - 服务端渲染（SSR）页面中，初始 HTML 无法预知哪些图片已被访问，JS 初始化必须等 DOM 就绪且数据可查
- 用户清空 localStorage 后状态重置——这不是 bug，是预期行为
-
filter: grayscale(1)在旧版 Safari（≤15.4）中可能不触发硬件加速，滚动时偶有闪烁，可加transform: translateZ(0)微调
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
