本文介绍一种纯 css 方案，利用 content 属性配合 :active 伪类实现点击时临时替换图片，同时说明其局限性、可访问性风险及替代建议。
在标准 Web 开发中，CSS 本身无法真正修改 HTML 元素的 src 属性值——因为 src 是 DOM 属性，而纯 CSS 不具备操作 DOM 的能力。但借助 content 属性的元素替换（element replacement）机制，我们可以对 标签实现视觉层面的“切换”效果。
✅ 可行方案：使用 content: url(...) 替换图像
该方法仅适用于无内容流依赖的装饰性图片，且需满足以下前提：
- 元素必须是 display: inline 或 inline-block（
默认符合）；
- content 属性仅对 ::before/::after 伪元素及部分可替换元素（如
）在特定上下文中生效（现代浏览器支持
直接使用 content 替换其原始 src）；
- :active 伪类仅在鼠标按下（或触控开始）期间生效，松开即恢复原图——它表示“正在被激活”，而非“已切换状态”。
示例代码如下：
@@##@@
.clickable-img:active {
content: url(https://placekitten.com/200/200);
}⚠️ 注意：此写法在 Chrome、Edge 和 Safari（最新版）中有效；Firefox 不支持对 直接使用 content（会忽略），因此不具备跨浏览器一致性。
❌ 重要限制与风险
-
不可访问性（Accessibility）问题：
content 替换的内容*不会更新 alt 文本、`aria-` 属性，也无法被屏幕阅读器识别**。若图片承载关键信息（如图标含义、状态指示），此方案将导致信息丢失，违反 WCAG 2.1 原则，甚至可能触及《无障碍法案》（如 ADA、EN 301 549）合规要求。立即学习“Java免费学习笔记（深入）”；
无持久状态：
:active 是瞬态伪类，无法实现“点击后保持新图片”的交互逻辑（如开关式切换）。如需持久状态，必须引入 JS 或借助 + label + :checked 的 CSS Hack（见下文延伸方案）。语义与 SEO 影响：
搜索引擎和爬虫仅解析原始 src 和 alt，不会感知 content 替换内容，可能导致图文语义脱节。
✅ 更健壮的纯 CSS 替代思路（推荐）
若目标是“点击切换并保持状态”，可采用隐藏复选框 + :checked + label 包裹的经典模式，完全不依赖 JS：
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.img-active { display: none; }
#toggle-img:checked + label .img-default { display: none; }
#toggle-img:checked + label .img-active { display: inline; }✅ 优势：
- 支持键盘聚焦（
- 状态持久（checked 可通过 :checked 精确控制）；
- 保留语义结构与可访问性（alt 仍有效，屏幕阅读器可读取当前可见图）；
- 兼容所有现代浏览器。
总结
- img:active { content: url(...) } 是一种实验性、瞬态、低兼容性的视觉覆盖技巧，不推荐用于生产环境的关键功能；
- 若追求纯 CSS 交互且需可访问性与状态管理，请优先采用 + label + :checked 组合方案；
- 对于复杂交互（如多图轮播、状态联动），应坦然使用轻量 JS（如 addEventListener 切换 src），以保障健壮性、可维护性与合规性。
