本文介绍一种纯 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免费学习笔记（深入）”；
