必须用作为状态源，因其:checked伪类仅响应真实dom选中状态；浏览器ua样式强制覆盖width等属性，故需用position: absolute; opacity: 0隐藏而非display: none，并确保label正确绑定以保障可访问性与交互。
必须用 <input type="checkbox"> 作为状态源，其他方式（比如直接操作 class 或用 JS 模拟）无法触发 :checked —— 它只响应真实的 DOM 选中状态。
为什么不能直接给 input[type="checkbox"] 写样式？
浏览器 UA 样式会强制覆盖 width、height、border-radius、background 等属性。你写的 width: 40px 很可能被忽略，最终还是显示默认小方框。
- 别用
display: none：它会让:checked失效（部分 Safari 版本甚至不触发状态变化） - 别用
visibility: hidden：屏幕阅读器无法聚焦，破坏可访问性 - 推荐组合：
position: absolute; opacity: 0; width: 1px; height: 1px;—— 隐藏但保留语义和交互能力 - 禁止单独用
appearance: none：Safari 旧版可能残留边框，必须配合border: 0和background: transparent
:checked 能控制哪些元素？
:checked 只能影响它之后的兄弟或后代元素，不能反向选择，也不能跨父容器。
- 要控制紧邻下一个兄弟：
input:checked + .switch-track - 要控制后续任意兄弟：
input:checked ~ .panel（前提是它们同级且共父） - 要控制子元素：
input:checked > .content（需把input包进同一父容器） - 错误写法：
.switch-track:has(input:checked)——:has()不支持伪类作为参数，语法非法
label 怎么绑定才真正生效？
点击区域是否响应，完全取决于 label 和 input 的关联是否正确。
- 包裹写法最稳：
<label><input type="checkbox"></label> - for/id 关联必须严格一致：
<input id="theme-toggle">+<label for="theme-toggle"></label>，大小写、空格都不能错 -
label必须有可点击区域：加display: inline-block或明确宽高，否则伪元素定位会漂移 - 移动端特别注意：如果父容器有
overflow: hidden且裁剪了label，点击会失效 - 别给
label加pointer-events: none—— 这是很多 UI 框架踩坑点
动画和主题变量怎么写才可靠？
动画必须作用在视觉元素上，不是 :checked 规则本身；变量应通过 :has() 提升作用域，但要注意兼容性。
- 滑块位移动画写在伪元素上：
label::after { transition: transform 0.2s ease; }，然后用input:checked + label::after { transform: translateX(24px); } - 深色模式变量建议用
body:has(#theme-toggle:checked) { --bg: #1a1a1a; }，再由各组件用var(--bg)引用 - Firefox 不支持
:has()，所以纯 CSS 主题切换在 Firefox 中必然降级，必须准备 JS 回退逻辑 - 避免长链选择器：
body:has(#theme-toggle:checked) header nav a—— DOM 结构一动就断，维护成本极高
最容易被忽略的是：DOM 结构顺序和层级必须严格满足选择器约束。哪怕 input 多嵌套一层，:checked ~ .target 就立刻失效。这不是样式问题，是选择器匹配失败 —— 调试时先临时取消隐藏，确认原生控件能否点中，再逐步恢复样式逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
