:checked + div 不生效最常见原因是html结构不满足相邻兄弟选择器要求：input与div必须同父、紧邻，中间不能有空白或注释；解决方法是删除空白或改用flex/grid布局配合display控制。
为什么 :checked + div 不生效？
最常见原因是 HTML 结构不满足「相邻兄弟选择器」的硬性要求：复选框或单选按钮（ 或 ）必须和目标
必须紧接在 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
- 想实现“任一 checkbox 选中就显示”？CSS 无法直接 OR 逻辑，得换思路：用一个隐藏的「总控 checkbox」+ javaScript 监听，或改用
:has()（注意兼容性）
移动端点击无响应？检查是否被 pointer-events 或 user-select 干扰
某些 ui 框架或重置样式会全局设置 input { pointer-events: none; }，导致无法触发 :checked；或者父容器设了 user-select: none，间接影响点击穿透。
快速排查方法：
- 在 DevTools 中选中该
input，看 computed 样式里 pointer-events 是否为 none
- 临时加
input { pointer-events: auto !important; } 测试
- 确保没有父级设置了
overflow: hidden 且裁剪了 input 的可点击区域（比如 input 实际渲染位置超出可视区）
需要动画过渡？:checked + div 本身不支持 transition
CSS 过渡只能作用于可动画属性（如 opacity、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 过渡值，就会出现“闪一下再展开”的断裂感。