:checked能替代JS实现开关切换，因其是原生伪类，用户点击checkbox/radio时浏览器自动更新状态，再通过:checked+或:checked~选择器联动控制其他元素样式。
为什么 :checked 能替代 JS 实现开关切换
因为 :checked 是原生伪类，只要用户点击 <input type="checkbox"> 或 <input type="radio">，浏览器就自动更新该状态，无需监听事件或操作 DOM。关键在于：它本身不触发行为，但能联动控制其他元素的样式——这才是无 JS 开关的核心机制。
常见错误是直接给 <input> 加样式，结果发现完全不可见（默认被隐藏）；或者用 label 包裹但没设 for 或没写 id，导致点击无效。
- 必须用
<input type="checkbox">，radio适合单选开关组 -
label必须与input显式关联（for="id"或包裹关系） -
input本身要隐藏（display: none或position: absolute; clip: rect(0 0 0 0)），否则样式难控 - 所有视觉变化都靠
:checked + .switch-track或:checked ~ .switch-track这类兄弟/后续兄弟选择器驱动
:checked + 和 :checked ~ 的选择器写法差异
两者决定你能控制谁、怎么布局。前者要求目标元素紧挨在 input 后面（相邻兄弟），后者允许中间插其他元素（通用兄弟）。实际中多数开关用 + 更安全，避免意外匹配。
典型结构：
立即学习“Java免费学习笔记（深入）”；
<input type="checkbox" id="toggle"> <label for="toggle" class="switch"> <span class="track"></span> <span class="thumb"></span> </label>
这里 .track 和 .thumb 都在 label 内，无法被 :checked + 直接选中——所以得把 input 放到 label 外部，并让 label 紧跟其后：
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
<input type="checkbox" id="toggle"> <label for="toggle" class="switch"></label>
然后用 #toggle:checked + .switch .track 控制轨道样式，或 #toggle:checked + .switch::after 控制滑块。
-
+更精确，但 HTML 结构必须严格相邻 -
~更灵活，但可能因中间插入其他元素导致样式错乱 - 不要用
:checked >（子元素选择器），input没有子元素可选
如何用 :checked 控制颜色、位置和过渡动画
颜色和背景切换最简单：#toggle:checked + .switch { background: #4CAF50; }；位置变化常用 transform: translateX() 配合 transition 实现平滑滑动。
关键点在于：所有动画属性（background、transform、box-shadow）必须加在被选中的目标元素上，且 transition 要写在**常态样式里**，不是只写在 :checked 中，否则动画不会生效。
- 过渡必须声明在未选中状态：
.switch { transition: background 0.2s, transform 0.3s ease; } - 滑块位移建议用
transform而非left，避免重排 - 移动端要注意
cursor: pointer加在label上，否则 iOS 可能不响应点击 - 无障碍需保留
aria-checked属性（虽无 JS，但可手动同步：<input aria-checked="false">→ 切换后改为"true"，不过纯 CSS 方案无法自动更新，这点常被忽略
兼容性和真机测试容易漏掉的点
:checked 在 IE9+、Edge 12+、Chrome/Firefox/Safari 全系支持，但 Safari 对 transition 在某些伪元素上的渲染偶尔有延迟，iOS Safari 在快速连点时可能丢一次状态——这不是 CSS 问题，而是原生 checkbox 的 focus/blur 行为干扰。
- Android Chrome 有时对
label点击区域识别不准，建议加min-height: 44px保证触控面积 - 不要依赖
:indeterminate做三态开关，它无法用纯 CSS 触发，必须 JS 设置indeterminate = true - 如果开关需要初始为“开”，直接给
input加checked属性即可，CSS 会立即响应 - 表单提交时，这个
input仍会作为正常字段发送值，别忘了后端校验逻辑
真正麻烦的是状态同步——比如多个页面共享同一个开关状态，或需要和 localStorage 联动，这时候纯 CSS 就到头了，得退一步引入最小 JS。
