label点击未触发input:checked的根本原因是label与input未正确绑定：需用for属性指向合法id，或确保input为label直接子元素；CSS选择器须基于input位置编写，隐藏时禁用display:none，安卓浏览器需注意事件延迟与手动dispatch change事件。
label 点击没触发 input:checked 状态变更
根本不是 CSS 写错了，而是 label 和 input 没真正“连上”。浏览器只在 input 元素的 checked 属性真实改变时才激活 :checked，而点击 label 是否能改这个属性，完全取决于绑定是否合法。
-
label必须通过for属性显式指向input的id，且id只能含字母、数字、下划线、短横线（比如id="agree-terms"）——id="user.agree"或id="form[terms]"会直接失效 - 嵌套写法必须是
，且input是label的**直接子元素**；中间插个就可能断链 - 别用
这类结构，部分安卓原生浏览器根本不识别这种嵌套下的状态同步
:checked 样式写了但页面没反应
样式规则本身可能完全正确，但作用对象错了。CSS 选择器必须基于 input 元素的位置来写，不能指望它“从 label 出发反向找”。
- 想控制紧挨着
input后面的label，得写input:checked + label，而不是label:has(+ input:checked)（该伪类不被支持） -
input必须和目标元素同级，且在它前面；如果 DOM 是，那input:checked + label永远不匹配 - 隐藏
input时，绝对不要用display: none或opacity: 0; pointer-events: none—— 前者让:checked失效，后者在安卓上会切断状态监听链；推荐用position: absolute; left: -9999px; width: 1px; height: 1px;
安卓原生浏览器里点一下没反应
不是 bug，是这些浏览器（如旧版 Samsung Internet、部分定制 ROM 浏览器）对状态更新做了延迟合并：点击后不立刻重绘，要等事件队列空或下一帧。尤其当页面有未优化的 will-change、大量 transform 层时更明显。
-
appearance: none必须三行全写：-webkit-appearance: none、-moz-appearance: none、appearance: none；漏掉无前缀的appearance: none在 Android 10+ WebView 中大概率失效 - 如果用
background-image替换勾选图标，确保图片已加载完成——未加载时，:checked样式可能被跳过渲染 - 避免用
clip-path: inset(50%)隐藏控件，部分安卓浏览器对该属性支持不完整，会导致:checked完全不响应
radio 组里只有一个能生效，但样式全没变
radio 的互斥逻辑依赖 name 属性，但样式是否生效，还卡在结构和隐藏方式上。
- 所有同组
input[type="radio"]必须有**完全相同的name值**（区分大小写），否则浏览器当它们是独立控件，:checked无法形成互斥 - 别用
input:checked ~ .panel却把.panel放在input外层父容器里——~只能选兄弟，不能跨级；得把input放到目标元素的同级前面 - 移动端热区太小也会导致点不中：给
label加min-height: 44px，并设cursor: pointer，确保点击穿透正常
真正容易被忽略的是：安卓原生浏览器里，:checked 的触发严格依赖于 input 元素是否“被用户真实操作”。JS 手动设置 input.checked = true 不会自动触发重绘，除非再调用 input.dispatchEvent(new Event('change'))。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
