:checked + label 失效主因是 DOM 顺序错误或类名错配；opacity: 0 比 display: none 更安全因其保留可访问性；需严格匹配 id/for、限定 input[type]、统一 name（radio）、添加 :focus-visible 样式。
为什么 :checked + label 有时完全不生效
最常见原因是 DOM 顺序错误：input 必须紧邻在 label 之前，中间不能有文本、注释或其它元素。哪怕多一个换行符，在某些解析模式下都可能破坏相邻兄弟关系。
另一个高频陷阱是误把类名加在 label 上却写成 input.petCard:checked + label —— 这里 .petCard 实际属于 label，input 根本没有这个类，自然永远不匹配。
-
✅ 正确结构：<input type="radio" id="a"><label for="a">A</label> -
❌ 失效结构：<label for="a">A</label><input type="radio" id="a">（顺序反了） -
❌ 失效写法：input.custom:checked + label，但class="custom"其实写在label上
opacity: 0 比 display: none 更安全的原因
用 display: none 隐藏 input 会直接让它脱离可访问性树：键盘无法 Tab 到它，屏幕阅读器读不到，JavaScript 的 focus() 也失效。而 opacity: 0 配合 position: absolute 既移出布局流，又保留语义和焦点能力。
注意别加 pointer-events: none —— 它会让点击 label 失去触发 input 的能力，除非你已确保 label 通过 for 属性或包裹方式正确绑定。
立即学习“前端免费学习笔记（深入）”；
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 必须保留
id和for的严格对应，缺一不可 - Safari 旧版本对
appearance: none支持不稳定，建议始终叠加border: 0和background: transparent - 若用嵌套结构（
label包裹input），:checked + label会失效，得改用input:checked + span或input:checked ~ label
复选框与单选框的 :checked 选择器差异
input:checked 会同时命中 checkbox 和 radio，容易在混用场景下误改样式。更稳妥的是显式限定类型：
input[type="checkbox"]:checked + label 只影响复选框关联的 label；input[type="radio"]:checked + label 则只作用于单选按钮。
这点在组件库或多人协作项目中特别关键 —— 有人新增一个 radio 却没改 CSS，结果所有 checkbox 样式突然错乱。
- 同组
radio必须共用相同的name值，否则互斥逻辑崩溃 -
checkbox不需要name一致，但若想用同一套 CSS 批量控制，仍建议统一命名前缀 - 伪元素（如
::before）绘制的勾选图标，推荐用transform: scale(0)+opacity: 0控制显隐，比单纯display: none更利于过渡动画
无障碍焦点样式常被忽略的细节
隐藏了原生控件后，很多人忘了给 label 加 :focus-visible 样式。键盘用户按 Tab 时，焦点会落在 label 上，但若没视觉反馈，就等于“看不见焦点”。
更隐蔽的问题是：当 label 内含图片或复杂结构时，label 默认不是可聚焦元素，需手动加 tabindex="0" 并监听 Enter/Space 键模拟点击 —— 但这是退化方案，优先应确保 for 关联有效且 input 本身可聚焦。
- 测试方法：纯键盘操作，从页面顶部
Tab到底，确认每个选项都有清晰焦点环 - 不要依赖
:focus，用:focus-visible避免鼠标用户看到突兀边框 - 如果用了
transition，记得对outline或box-shadow也加，否则焦点出现时会有跳变
