单选按钮选中后控制邻近元素样式需将input置于目标元素之前，用:checked配合+或~选择器；label须通过for属性或嵌套绑定才能触发选中；隐藏input时避免display:none，兼容性问题需注意。
怎么让单选按钮选中后，旁边的标签或容器变样式
靠 :checked 伪类 + 相邻/通用兄弟选择器就能做到，前提是 HTML 结构得“可选中元素在前，要控制的元素在后”。浏览器原生不支持反向控制（比如先写 label 再写 input，还想用 input:checked + label 就失效）。
常见错误现象：label 点击没反应、样式死活不生效——八成是 DOM 顺序错了，或者用了子选择器（input:checked > .target）这种无效写法。
- 必须保证
input[type="radio"]元素在目标元素之前（同级），且中间不能隔开其他非兄弟元素 - 想控制紧挨着的下一个元素，用
+；想控制后面所有符合条件的兄弟，用~ - 如果目标是包裹
input的父容器（比如.option），CSS 无法向上选中，得换思路：把input放到容器最前面，再用.option input:checked ~ *控制内部子元素
为什么 label 不加 for 或嵌套就联动不了
点击 label 能选中对应单选按钮，本质靠的是绑定关系。没绑定，点击只是触发 label 自身事件，不会影响 input 的 checked 状态，自然也触发不了 :checked 样式。
使用场景：表单里希望用户点文字就选中，同时还要做视觉反馈，比如高亮整个选项卡。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：给
input设id，label用for="xxx"显式关联 - 嵌套写法也行：
<label><input type="radio">选项文本</label>，但注意此时input必须是label的直接子元素，否则部分浏览器可能不响应 - 别用
onclick手动 togglechecked——破坏了原生行为，还可能让键盘导航（Tab + Space）失效
兼容性坑：:checked 在老版本 iOS Safari 和 IE 中的表现
:checked 本身兼容性很好（IE9+、iOS 5.0+ 都支持），但问题常出在「兄弟选择器」或「display: none 的 input」上。
性能影响小，但结构一复杂就容易漏掉边界情况。
- IE9–11 不支持对
display: none的input应用:checked样式（哪怕它逻辑上已选中），必须用visibility: hidden或position: absolute; left: -9999px隐藏 - iOS Safari 旧版（≤ 9.3）对
input:checked ~ .target的重绘有延迟，快速连点可能样式滞后，加transform: translateZ(0)强制硬件加速可缓解 - 别在
:checked规则里写太深的嵌套选择器（比如input:checked ~ .wrapper > .inner span），某些安卓 WebView 会丢样式
如何用纯 CSS 实现“单选组高亮当前项，其余置灰”
核心是利用「同一 name 的单选按钮互斥」特性，配合兄弟选择器批量控制未选中的项。
参数差异在于：是否需要区分「未选中」和「未初始化」状态？默认情况下所有 input 都未选中，所以得靠 :checked 做正向控制，再用通用兄弟选择器反向压制其他项。
input[type="radio"].group-a:checked ~ .group-a-item { opacity: 1; }
input[type="radio"].group-a:not(:checked) ~ .group-a-item { opacity: 0.4; }
但上面写法会错乱——因为每个 input 都会匹配后面的兄弟，互相覆盖。正确做法是把所有 input 放最前面，统一用第一个已选中的来驱动：
- 确保所有
input同级且连续排在最前 - 用
input.group-a:checked ~ .group-a-item开启高亮 - 再额外加一条
.group-a-item:not(.active)类做默认置灰，由 JS 或初始 HTML 控制哪个是 active —— 纯 CSS 没法“取反选中项”，这是它的天然限制
真正干净的方案往往要接受一个事实：CSS 控制“已选中”很稳，控制“未选中”得靠结构约束或少量 JS 补位。别硬刚。
