用:checked配合相邻兄弟选择器+可控制紧邻的说明文本显隐，前提是input必须直接位于.text之前且同级；默认隐藏.text{display:none}，选中时input:checked+.text{display:block}。
用 :checked 配合相邻兄弟选择器显示说明文本
单选框（<input type="radio">）本身没有内容区域，想让它“控制”下方文本的显隐，核心是利用 :checked 伪类 + CSS 选择器的层级关系。最可靠的方式是让说明文本紧跟在对应 <input> 后面，并用 + （相邻兄弟选择器）绑定。
常见错误是试图用 :checked ~ （通用兄弟选择器）跨多个元素匹配，或把文本放在 <label></label> 里却没写对结构——这会导致未选中时文本仍可见，或切换后不响应。
- HTML 结构必须是：
<input type="radio" id="a"><label for="a">选项A</label><div class="desc">这是A的说明</div> - CSS 写成：
input[type="radio"]:checked + .desc { display: block; }，同时默认隐藏：.desc { display: none; } - 不能把
.desc放在<label></label>内部再用:checked + label .desc——因为:checked只作用于<input>自身，它和内部元素不构成兄弟关系
为什么不用 JavaScript 更简单？
纯 CSS 方案依赖严格的 HTML 顺序和紧邻关系，一旦中间插入其他元素（比如一个 <span></span> 或空注释），+ 就失效。而 JS 可以直接通过 id 或 data- 属性精准定位目标元素，容错性高。
典型场景：表单字段动态渲染、CMS 输出不可控 HTML、或需要支持旧版 Safari（:checked + 在 Safari 5.1+ 才稳定）。
立即学习“前端免费学习笔记（深入）”；
- 监听
change事件比click更安全，避免重复触发 - 用
document.querySelector('[data-target="' + e.target.value + '"]')比靠 DOM 位置找更健壮 - 别忘了移除之前显示的其他说明文本，否则多个同时出现
display: none 和 visibility: hidden 的实际区别
两者都能“隐藏”，但行为完全不同。如果说明文本有占位需求（比如下方元素不能上移），用 visibility: hidden；否则一律优先用 display: none。
-
display: none：元素彻底脱离文档流，不占空间，无法被聚焦或读屏器访问 -
visibility: hidden：元素仍在流中，保留高度/宽度，但不可见；子元素设visibility: visible仍可显示 - 动画过渡只能用
opacity或transform，display无法过渡——这点常被忽略，导致想加淡入效果时卡住
多组单选框共存时如何避免互相干扰
关键在 name 属性隔离。同一组单选框必须共享 name 值，不同组必须用不同 name。CSS 选择器若没限定范围，容易误匹配。
例如两组单选框都用 .desc 类，但没加组标识，就会出现选 A 组时 B 组说明也显示——因为 input:checked + .desc 不区分 name。
- 方案一：给每组加唯一容器 class，如
<div class="group-a">...</div>，CSS 写成.group-a input:checked + .desc - 方案二：用属性选择器限定，如
input[name="plan"]:checked + .desc，前提是所有同名单选框确实属于同一逻辑组 - JS 方案中，用
e.target.name动态拼接data-group查询更灵活
真正麻烦的不是写法，而是 HTML 结构是否可控。如果模板由后端或第三方组件生成，强行套用 + 选择器反而增加维护成本。这时候宁可用几行 JS 明确控制，也比反复调试 CSS 选择器边界强。
