纯 CSS 无法直接响应单次点击事件并持久保留状态，但可通过隐藏复选框（checkbox）+ label 关联 + :checked 伪类巧妙实现“点击即切换、状态保持”的效果，无需 JavaScript。
纯 css 无法直接响应单次点击事件并持久保留状态，但可通过隐藏复选框（checkbox）+ label 关联 + `:checked` 伪类巧妙实现“点击即切换、状态保持”的效果，无需 javascript。
在 Web 开发中，常有需求：点击一个图片或按钮后，其样式（如灰度、旋转、透明度等）立即改变，并持续保持该状态，直到再次点击才恢复——这本质上是一个“开关式”交互。遗憾的是，CSS 的 :active 仅在鼠标按下瞬间生效，松开即失效；:visited 仅对 标签的已访问历史生效，且受安全限制（无法用于任意元素或自定义样式）；而原生 CSS 并无 :clicked 或 :toggled 这类持久化交互伪类。
所幸，我们可以借助 HTML 表单控件的语义特性与 CSS 选择器能力，构建一种“伪点击状态”机制：使用 作为状态容器（默认未勾选 → 初始样式；勾选后 → 目标样式），再通过
以下是一个完整、可直接运行的示例，实现点击图片切换灰度效果：
<div class="toggle-container">
<input id="img-toggle" class="toggle-input" type="checkbox">
<label for="img-toggle">
<img src="https://picsum.photos/id/237/200/200" alt="Sample image">
</label>
</div>/* 隐藏 checkbox，不占用布局空间 */
.toggle-input {
display: none;
}
/* 为 label 内的 img 添加平滑过渡和手型光标 */
.toggle-container label > img {
transition: filter 0.3s ease;
cursor: pointer;
border-radius: 4px;
}
/* 当 checkbox 被勾选时，影响后续同级 label 中的 img */
.toggle-input:checked ~ label > img {
filter: grayscale(1);
}✅ 关键原理说明：
立即学习“前端免费学习笔记（深入）”；
- ~ 是通用兄弟选择器，确保 checkbox 状态变化能影响其后所有符合条件的兄弟元素（此处为 label > img）；
- transition 保证滤镜变化具备动画效果，提升用户体验。
⚠️ 注意事项：
- 此方法依赖 HTML 结构顺序： 必须位于
- 若需支持多个独立切换项，需为每个 checkbox 设置唯一 id 和对应的 for 属性；
- 不适用于需要复杂逻辑（如计数、多状态轮转）的场景——此时应交由 JavaScript 处理；
- 所有现代浏览器均原生支持该方案，兼容性优异（IE9+）。
总结：虽然 CSS 本身不具备事件监听能力，但通过语义化表单控件与选择器的协同设计，我们完全可以用纯 CSS 实现可靠、可访问、高性能的点击切换交互。这是一种优雅的“渐进增强”实践——既满足基础功能，又无需 JS 介入，值得纳入前端日常工具箱。
