本文介绍一种纯 css 方案，利用 `content` 属性配合 `:active` 伪类在用户点击瞬间替换图片，同时明确其局限性（如无法持久切换、无障碍缺陷等），并提供可访问性优化建议。
在纯 CSS 环境下实现“点击后更换图片”，需注意一个关键前提：CSS 本身没有状态记忆能力，也没有类似 :clicked 或 :toggled 的伪类。因此，严格意义上的“点击后永久切换图片”无法仅靠 CSS 完成。但若目标是在鼠标按下（激活）的瞬时视觉反馈中切换图像，则可通过 content 属性实现——前提是该 元素为被替换元素（replaced element）且使用 display: inline 或 inline-block，并满足特定条件。
✅ 可行方案：利用 content 替换 :active 状态下的图像
CSS 的 content 属性在 ::before/::after 伪元素中常用，但它也可直接作用于某些可替换元素（如 ）本身（需设置 display: block 或 inline-block 并显式声明 content）。此时，img:active 可覆盖原始 src，显示新图像：
img {
display: inline-block; /* 必须设置，否则 content 不生效 */
vertical-align: middle;
}
img:active {
content: url('https://placekitten.com/200/200');
}
@@##@@
⚠️ 注意：此效果仅在鼠标按下（active 状态）期间生效，松开即恢复原图 —— 这是 :active 的固有行为，不是“切换开关”而是“按下反馈”。
❌ 常见误区与限制
- :active ≠ “已点击”状态：它只代表“正被激活的瞬间”（毫秒级），无法保持切换结果；
- 无障碍严重缺失：content: url(…) 替换的图像不参与 DOM 结构、无 alt 文本、无法被屏幕阅读器识别，违反 WCAG 1.1.1（文本替代）原则；
- 浏览器兼容性：Chrome/Firefox/Safari 支持 img { content: … }，但 Edge（旧版）及部分移动端存在兼容问题；
- 语义退化：原 的 src 和 alt 失效，SEO 与可访问性双重受损。
✅ 推荐增强实践（兼顾可用性与可访问性）
若必须避免 JavaScript，可结合语义化标签与焦点管理模拟交互状态：
