纯CSS实现点击切换样式需用配合:checked伪类，通过label关联确保可交互，样式作用于兄弟/子元素，radio天然互斥且兼容性好。
radio + :checked 怎么触发点击变样式
纯 CSS 实现点击切换样式，核心就靠 <input type="radio"> 和 :checked 伪类配合。它不依赖 JS，但必须满足“表单控件真实存在且可交互”这个前提。
常见错误是把 input 隐藏后没配 label 或没用 for/nesting 关联，导致点击无响应。样式变化实际发生在关联的兄弟/子元素上，input 本身只是状态源。
- 必须用
type="radio"（不能用checkbox，除非你要多选；但:checked对两者都有效） -
input要在 DOM 中、未被disabled、且有合法name（同组 radio 才能互斥） - 想点文字/图标触发？用
<label for="id"></label>或把input包进label里 - 样式写在
input:checked + .target或input:checked ~ .target，注意选择器层级关系
为什么用 radio 而不是 checkbox
因为 :checked 本身对两者都生效，但业务上“单选切换”更常见——比如标签页、主题切换、选项卡。用 radio 天然带互斥逻辑，不用 JS 就能保证同一时间只有一个激活。
用 checkbox 的话，多个可以同时 :checked，如果只想要单选效果，就得加额外限制（比如用 JS 清除其他项），反而绕路。
立即学习“前端免费学习笔记（深入）”；
- 多个
radio共享同一个name值，浏览器自动处理互斥 - 哪怕视觉上完全隐藏
input，只要 DOM 存在、可聚焦、可点击，:checked就会更新 - 兼容性极好：Chrome 4+、Firefox 4+、Safari 3.1+、Edge 全支持，连 IE9 都行
隐藏 input 但保留可访问性怎么做
直接 display: none 或 visibility: hidden 会让 input 完全不可交互、不可聚焦，:checked 永远不会触发。得用“视觉隐藏但语义保留”的方式。
最稳妥的是用 screen reader-only 技法：绝对定位移出视口 + 不透明度为 0 + 不影响布局。
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
- 别用
opacity: 0单独控制，有些浏览器（旧版 Safari）下仍会阻止点击穿透 - 别用
pointer-events: none，这等于主动禁用交互 - 确保对应
label的for属性值和input的id严格一致（大小写敏感）
常见失效场景和调试建议
样式没变？大概率是选择器没匹配到目标元素，或 input 根本没被真正点击。打开 DevTools 的 Elements 面板，手动勾选 input 的 checked 属性，看样式是否生效——能生效说明 CSS 没问题，问题出在交互链路上。
- 检查控制台有没有
Failed to load resource或InvalidStateError（一般没有，但万一有 JS 干扰了表单） - 确认
label和input在同一 DOM 树层级，~是后续兄弟，+是紧邻兄弟，嵌套时要用label > input:checked + .target这类写法 - 移动端要注意
touch-action是否被意外设为none，导致点击事件不触发 - 如果用了 CSS-in-JS 或 Shadow DOM，
:checked依然工作，但选择器作用域可能受限，需确认样式是否成功注入到正确节点
真正麻烦的不是语法，而是状态和样式的映射关系容易断在 DOM 结构或可访问性细节上。调的时候先确保 input 能被 tab 焦点到、空格能切中、鼠标能点中——其他都是锦上添花。
