:checked + div 不生效最常见原因是HTML结构不满足相邻兄弟选择器要求：input与div必须同父、紧邻，中间不能有空白或注释；解决方法是删除空白或改用Flex/Grid布局配合display控制。
为什么 :checked + div 不生效？
最常见原因是 HTML 结构不满足「相邻兄弟选择器」的硬性要求：复选框或单选按钮（<input type="checkbox"> 或 <input type="radio">）必须和目标 <div> 处于同一父元素下，且 <div> 必须紧接在 input 后面——中间不能有文本节点、注释或其他元素。
例如以下结构会失败：
<label> <input type="checkbox"> <!-- 这里有个换行和空格，它算文本节点 --> <div>内容</div> </label>
解决办法是删掉 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 过渡值，就会出现“闪一下再展开”的断裂感。
