:checked伪类仅适用于checkbox和radio输入框，通过相邻/兄弟选择器控制关联元素样式，无法作用于select、option或自定义组件，也不支持跨层级或class模拟。
css:checked 伪类只能作用于
它不会对 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无法跨层级穿透
示例：
对应 CSS：
input[type="checkbox"] { display: none; }
input:checked + label { color: #007bff; font-weight: bold; }
立即学习“前端免费学习笔记（深入）”；
移动端 click 无效？检查是否加了 pointer-events: none 或标签未正确绑定
在 iOS Safari 或部分安卓 WebView 中，如果 label 没有正确关联 for 属性或没包裹 input，点击可能不触发 :checked 状态切换。另外，以下情况会导致点击无响应：
