:checked + div 不生效最常见原因是HTML结构不满足相邻兄弟选择器要求：input与div必须同父、紧邻，中间不能有空白或注释；解决方法是删除空白或改用Flex/Grid布局配合display控制。
为什么 :checked + div 不生效？
最常见原因是 HTML 结构不满足「相邻兄弟选择器」的硬性要求：复选框或单选按钮（ 例如以下结构会失败： 解决办法是删掉 两者都支持 立即学习“前端免费学习笔记（深入）”； 某些 UI 框架或重置样式会全局设置 快速排查方法： CSS 过渡只能作用于可动画属性（如 正确做法是组合使用： 例如： 真正容易被忽略的是：当 或 ）必须和目标 input 后面——中间不能有文本节点、注释或其他元素。input 和 div 之间的所有空白（包括换行），或改用 Flex/Grid 布局配合 display: none 控制，而不是强依赖相邻关系。
:checked + div 在 checkbox 和 radio 上行为不同:checked，但触发逻辑不同：checkbox 可多选，radio 是单选组互斥。这意味着如果你用多个 radio 控制同一个 div，只有最后一个匹配的规则会生效（CSS 层叠规则）；而多个 checkbox 可各自独立控制不同 div。
div 仅在特定 radio 被选中时显示？给每个 input 加唯一 id，div 放在对应 input 后面，用 #id:checked + div
:has()（注意兼容性）移动端点击无响应？检查是否被 pointer-events 或 user-select 干扰
input { pointer-events: none; }，导致无法触发 :checked；或者父容器设了 user-select: none，间接影响点击穿透。
input，看 computed 样式里 pointer-events 是否为 none
input { pointer-events: auto !important; } 测试overflow: hidden 且裁剪了 input 的可点击区域（比如 input 实际渲染位置超出可视区）需要动画过渡？
:checked + div 本身不支持 transitionopacity、height、transform），而 display 不可过渡。所以别写 div { display: none; transition: all 0.3s; } —— 它不会动。
opacity + visibility 控制显隐（更轻量）max-height + overflow: hidden 模拟高度过渡（需预设合理最大值）height 做 transition（auto 值不可动画）div {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
input:checked + div {
opacity: 1;
visibility: visible;
}div 内容动态变化（比如 JS 插入新节点）后，:checked + div 规则依然有效，但若内容高度变化大，又没配好 max-height 过渡值，就会出现“闪一下再展开”的断裂感。
