要让 checkbox 点击后样式持久显示，必须通过 input:checked 结合兄弟选择器（+ 或 ~）作用于同级可见元素，并用 label 正确绑定触发；同时隐藏原生 input，确保 dom 顺序与 css 选择器匹配。
怎么让 checkbox 点击后样式一直保持？
靠 :checked 本身做不到——它只在元素被选中时生效，但样式是否“可见”，取决于你把它用在哪儿。关键不是状态，是**如何把状态映射到目标元素上**。
常见错误：只给 <input type="checkbox"> 写 :checked 样式，结果发现啥也没变——因为 input 默认不可见，且没关联任何视觉元素。
真正起作用的是「兄弟选择器 + label 配合」，核心链路是：input:checked + label 或 input:checked ~ div。
- 必须保证
input和要控制的元素在 DOM 中是**同级且顺序正确**（+要紧邻，~可跨多个兄弟） -
label最好用for属性或包裹input，否则点击 label 不会触发选中 - 别忘了设置
input { position: absolute; clip: rect(0 0 0 0); }隐藏原生控件，否则会看到两个勾
为什么 label 没反应？检查这三点
点 label 没选中、样式不更新，八成是结构或属性漏了。
-
label没绑定input：要么加for="xxx"，且input有对应id="xxx"；要么直接把input套进label里 -
input在label后面但用了+：比如label + input:checked + span，实际是input在后，得写成input:checked + span - CSS 优先级被覆盖：比如全局写了
span { color: #333; }，而你的input:checked + span { color: red; }没生效，加!important是临时解法，更该检查层级和 specificity
radio 和 checkbox 的 :checked 行为差异
看起来一样，但实际交互逻辑不同，直接影响样式持久化效果。
-
checkbox：可多选，每个input独立响应:checked，适合做「开关式」样式切换（如暗色模式按钮） -
radio：同一name下只能一个选中，:checked总是唯一，适合做「单选面板」（如选项卡切换），此时常用input:checked ~ .panel控制对应内容显隐 - 注意：radio 的
name值必须相同才构成一组，否则各自独立，:checked就失去互斥意义
移动端点击无响应？focus 与 active 的干扰
iOS Safari 和部分安卓浏览器对 :checked 的触发有延迟或失效，尤其当 label 里只有文字、没留足够点击热区时。
- 给
label加min-height: 44px（iOS 推荐最小触控尺寸），避免点不中 - 别依赖
:active模拟点击反馈：它不持久，且在某些系统里不会触发:checked状态变更 - 如果必须兼容老安卓（如 Android 4.x），考虑加一层 JS 监听
change事件并手动切 class，纯 CSS 方案在这里不可靠
:checked 本身没问题，问题永远出在「状态没传出去」或者「传出去了但目标没接住」。DOM 顺序、label 绑定、隐藏方式、移动端热区——这些地方错一个，整个链路就断了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
