不能靠:checked单独识别刚点击的单选框；需用:checked配合相邻兄弟选择器（+或~），且HTML结构必须满足单选框紧邻目标元素，否则样式失效。
单选框点击后如何用CSS识别当前选中项
直接说结论：不能靠:checked单独选中“被点击的那个”，它只反映状态，不记录动作。真正能精准定位刚被点中的那个input[type="radio"]，得靠:checked配合相邻兄弟选择器（+或~），但前提是HTML结构必须可控——也就是单选框后面紧跟着你要样式化的元素。
为什么label + input:checked永远不生效
常见错误是把顺序搞反了。浏览器渲染时，label通常包裹或关联input，但+选择器要求目标元素**紧接在前一个元素之后**。所以label + input:checked实际是在找“前面是label、后面紧跟且已选中的input”，而现实中input往往在label内部或之前。
-
input[type="radio"] + label才是常用写法：单选框在前，label在后，点击label也能触发checked，样式可作用于label - 如果label在前、input在后，又想样式化label，只能用
input:checked ~ label（注意是~，不是+），但必须确保它们同级且在同一个父容器里 - 跨父级、嵌套层级深的结构，纯CSS无法回溯选中“对应的label”
:checked + .option-desc失效的三个典型场景
这个组合看似简单，实际掉坑最多。只要出现“点了没反应”，先核对这三点：
- HTML中
.option-desc是否**紧挨着**input:checked？中间不能有空格、换行、注释或其它标签——哪怕一个+断掉 -
input有没有被display: none或visibility: hidden？部分老版Safari对隐藏的:checked状态识别不稳定 - 是否存在多个同
name的单选框？:checked只会匹配当前被选中的那一个，其他同名未选中的不会触发该规则——这点常被误认为“样式丢了”
移动端点击区域小导致伪选中失败
PC上点label文字能触发input:checked，但移动端手指点不准，尤其当input本身没显式设置width/height时，实际点击热区可能只有1px。这时候即使DOM结构完全正确，:checked + label也像“失灵”了一样。
立即学习“前端免费学习笔记（深入）”；
- 给
input[type="radio"]加position: absolute; opacity: 0;，再用label撑开点击区域，是最稳的方案 - 避免用
font-size: 0缩掉input再靠label撑——某些Android WebView会忽略这种input的状态更新 - 真要兼容极旧环境（比如微信X5内核v3），建议加一句
input:focus + label { outline: 1px solid #007aff; }辅助验证焦点是否到达
最麻烦的其实是“看起来生效了，但切换选项时旧样式没及时清除”——这往往是因为用了~而非+，结果所有后续兄弟都响应了同一个:checked，而不是仅响应它紧邻的那个。结构一复杂，就容易漏掉这个细节。
