:checked伪类仅能通过+或~选择器向后影响同级兄弟元素，无法向上、跨父容器或选子元素；必须确保input与目标元素同父且input在前，否则样式不生效。
:checked伪类的 DOM 作用域被浏览器硬性限制
因为 :checked 本身不“驱动”样式，它只是个状态标记；浏览器只允许它通过 +（紧邻兄弟）或 ~（后续兄弟）选择器向后匹配同级元素，这是 CSS 规范与渲染引擎共同决定的行为边界。它不能向上选父、不能跨父容器、不能选子元素——哪怕结构上看起来“应该能”，实际也完全无效。
:checked > .panel 或 :checked .content 为什么永远不生效
这两个写法常见于误判 DOM 关系的场景：
-
:checked > .panel要求.panel是input的**直接子元素**，但input是替换元素，不能包含子节点，所以该选择器恒不匹配 -
:checked .content是后代选择器，依赖祖先-后代路径，而input:checked在 DOM 树中没有可容纳.content的子树层级，纯属语法合法但语义断链 - 即使把
.content塞进label内部，input:checked label .content仍不成立——因为:checked状态不会“穿透”到 label 的后代，它只影响自身及后续兄弟
想控制非兄弟元素？必须重构 HTML 结构
没有绕过限制的 CSS 技巧，只有两种可行路径：
- 把目标元素和
input放到**同一父容器内**，且input在前，用:checked ~ .target（推荐）或:checked + .target（要求严格紧邻） - 把
input**嵌套进label**，改用label input:checked + .target或更稳妥的label:has(input:checked) .target（需现代浏览器支持:has()） - 放弃纯 CSS，用 JS 直接操作 class 或
style.display——当目标元素在另一个组件、iframe 或动态插入的 DOM 中时，这是唯一可靠方式
容易被忽略的隐性约束：父容器必须一致
哪怕 input 和 .sidebar 在视觉上并排，只要它们的最近共同父元素不同（比如一个在 .header，一个在 .main），~ 就完全失效。浏览器不会跨父查找兄弟关系——它只看 DOM 树中的直接父子层级。这也是为什么很多“明明结构看起来对”的案例死活不触发，最终发现是模板里多套了一层 div 或框架自动注入了隔离容器。
立即学习“前端免费学习笔记（深入）”；
