:checked伪类仅适用于checkbox和radio输入框，通过相邻/兄弟选择器控制关联元素样式，无法作用于select、option或自定义组件，也不支持跨层级或class模拟。
css:checked 伪类只能作用于 <input type="checkbox"> 和 <input type="radio">
它不会对 select、option 或自定义组件生效，也不是所有浏览器都支持在非表单控件上“模拟”选中状态。原生 :checked 只监听真实 DOM 中的 checked 属性变更，且仅适用于上述两种 input 类型。
常见错误是给一个 div 加 class="checked" 后试图用 div:checked 匹配——这永远不生效，因为 :checked 是伪类，不是类选择器。
必须配合相邻/子元素选择器才能控制其他元素样式
:checked 本身只作用于被选中的表单控件，而这类控件默认不可见或样式受限（比如复选框有系统原生外观）。要实现“定制选中样式”，得靠它触发兄弟或后续元素的样式变化。
- 最常用的是
+ label：复选框和 label 紧邻时，input:checked + label可以给 label 加背景、边框、图标等 - 若 label 在 input 前面，需用
input:checked ~ label（通用兄弟选择器），但要求 label 和 input 在同一父容器内 - 想控制更远的元素？只能靠 JS 切换 class，
:checked无法跨层级穿透
示例：
<input type="checkbox" id="agree"><br><label for="agree">我已阅读并同意</label>对应 CSS：
input[type="checkbox"] { display: none; }<br>input:checked + label { color: #007bff; font-weight: bold; }
立即学习“前端免费学习笔记（深入）”；
移动端 click 无效？检查是否加了 pointer-events: none 或标签未正确绑定
在 iOS Safari 或部分安卓 WebView 中，如果 label 没有正确关联 for 属性或没包裹 input，点击可能不触发 :checked 状态切换。另外，以下情况会导致点击无响应：
- label 上写了
pointer-events: none（常被 UI 框架误加） - input 被设为
display: none但没留出可点击区域（label 必须存在且可交互） - 父容器有
overflow: hidden且 label 部分被裁剪，导致点击区域失效
调试建议：临时取消 display: none，确认原生 checkbox 是否能点；再逐步恢复隐藏逻辑。
radio 组的 :checked 样式切换依赖 name 属性一致
单选按钮只有同名（name="gender"）才构成互斥组，:checked 才有意义。否则每个都是独立控件，多个可同时选中。
容易忽略的一点：CSS 里不能靠 input[name="gender"]:checked 精确限定某组——虽然语法合法，但若页面存在多个同名 radio，该选择器会匹配全部已选中的那个（通常只有一个），所以没问题；但若想单独控制某个选项（如“男”被选中时变蓝，“女”被选中时变粉），得结合 id 或 value：
input[value="male"]:checked ~ .gender-label { color: blue; }<br>input[value="female"]:checked ~ .gender-label { color: pink; }注意：这种写法要求 label 必须在 input 后面且同级，否则要用 JS 补位。
实际项目中最难搞的往往不是写法，而是 label 和 input 的 DOM 顺序、可访问性（aria-label / for 绑定）、以及 Safari 对 :checked + * 的渲染延迟——有时候状态变了，样式一帧后才更新。
