纯 css 无法直接监听“单次点击”事件并持久改变元素状态，但可通过隐藏复选框（checkbox）+ label 关联的技巧，利用 :checked 伪类实现点击即切换、状态保持的效果。
纯 css 无法直接监听“单次点击”事件并持久改变元素状态，但可通过隐藏复选框（checkbox）+ label 关联的技巧，利用 :checked 伪类实现点击即切换、状态保持的效果。
在标准 CSS 规范中，:active 仅在鼠标按下（或触控开始）的瞬时生效，松开即失效；:visited 仅对 <a> 标签的历史访问状态有效，且受浏览器安全策略限制（现代浏览器已禁止通过 :visited 读取或设置除颜色外的样式，如 filter），因此两者均无法满足“点击后样式持久保留”的需求。
真正的纯 CSS 解决方案是借助表单控件的状态切换机制——使用一个隐藏的 <input type="checkbox">，配合 <label> 的可点击特性与兄弟选择器（~）或相邻选择器（+），将用户点击行为映射为 checkbox 的 checked 状态，再通过 :checked 伪类控制目标元素样式。
以下是一个完整、可运行的示例，实现点击图片后永久应用灰度滤镜（再次点击可取消）：
<div class="toggle-container">
<input id="img-toggle" class="hidden-checkbox" type="checkbox">
<label for="img-toggle">
<img src="https://picsum.photos/id/237/200/200" alt="Sample image">
</label>
</div>.hidden-checkbox {
display: none;
}
.toggle-container label {
cursor: pointer;
display: inline-block;
}
.toggle-container label img {
transition: filter 0.3s ease;
vertical-align: middle;
}
.hidden-checkbox:checked ~ label img {
filter: grayscale(1);
}✅ 关键原理说明：
立即学习“前端免费学习笔记（深入）”；
- <label for="id"> 点击时会自动触发关联的 <input> 的 checked 状态切换；
- input:checked ~ label img 利用通用兄弟选择器匹配后续同级 <label> 中的 <img>；
- transition 保证滤镜变化具备平滑动画效果；
- 整个过程无需 JavaScript，完全由 CSS 和 HTML 语义驱动。
⚠️ 注意事项：
- 该方法本质是“状态切换”，而非“单次点击回调”，因此天然支持二次点击恢复原状；
- 若需单向切换（仅开不关），可改用 <input type="radio"> 配合不可逆逻辑（但需额外 DOM 控制）；
- 所有交互元素应确保可访问性：添加 alt 文本、适当 focus 样式，并考虑键盘 Enter/Space 触发支持（label 默认支持）；
- 避免嵌套过深的选择器，推荐为组件添加语义化 class（如本例中的 .toggle-container）以提升可维护性。
总结：虽然 CSS 本身无 onclick 事件模型，但通过巧妙结合表单控件状态、语义化标签和层叠选择器，我们完全可以构建出响应式、可访问、无 JS 的交互体验——这正是现代 CSS 工程化实践的重要一环。
