如何解决input被包裹在label等标签内时:checked~兄弟选择器不生效问题

CSS 后续兄弟选择器 ~ 仅能匹配与当前元素同属一个父节点、且位于当前元素之后的同级元素。你示例中的 <input id="test"> 是 <label> 的子元素，而 <div id="show"> 是 <label> 的同级元素，二者不属于同一个父节点，因此 #test:checked~#show 无法命中目标元素。

不需要修改现有HTML结构（无需移动或移除label标签），仅需调整CSS规则，使用CSS :has() 伪类即可实现需求，修改后的代码如下：

#show {
  display: none;
}
/* 匹配内部包含已选中#test的label，再选中该label后续的兄弟节点#show */
label:has(#test:checked) ~ #show {
  display: block;
}

该方案完全保留你提供的HTML结构，不需要做任何调整。

• 目前 Chrome 105+、Firefox 121+、Safari 15.4+ 均已原生支持 :has() 选择器，覆盖全球90%以上的用户流量
• 若需要兼容更低版本浏览器，仅能通过调整HTML结构实现：将input移出label标签，为label添加for="test"属性关联输入框，即可沿用你原来的CSS规则

内容的提问来源于stack exchange，提问作者source changer