为什么位于不同div中的checkbox的:checked伪类无法控制侧边栏菜单元素

问题根本原因 #

CSS通用兄弟选择器~的作用范围仅限于与当前元素同属一个父级容器、且位于当前元素之后的同级节点。你写的input[type="checkbox"]:checked ~ #sidebarMenu选择器，只能匹配到和checkbox在同一个父容器下、排在checkbox后面的#sidebarMenu，当两者分属不同父容器时不存在同级兄弟关系，选择器自然无法生效。

解决方案 #

方案1：修改CSS选择器适配现有HTML结构（无需改HTML） #

你给出的失效结构中，装checkbox的.container和装侧边栏的#content是同级节点，可以用:has()选择器跨父容器匹配，修改后的选择器如下：

.container:has(input[type="checkbox"]:checked) ~ #content #sidebarMenu {
    transform: translateX(0) !important;
}

该方案仅支持Chrome 105+、Firefox 121+、Safari 15.4+及以上版本的现代浏览器，适合不需要兼容旧版浏览器的场景。

方案2：调整HTML结构（兼容性最好） #

直接参考你提供的可生效示例，把#sidebarMenu挪到和checkbox同一个父容器.container内，保持原有CSS代码不变即可，所有浏览器都可兼容。

方案3：用JS实现（无需改结构、全兼容） #

添加少量JS代码监听checkbox的选中状态，主动控制侧边栏的显示隐藏：

const menuToggle = document.getElementById('openSidebarMenu')
const sidebar = document.getElementById('sidebarMenu')

menuToggle.addEventListener('change', function() {
  sidebar.classList.toggle('open', this.checked)
})

同时在CSS中添加对应状态的样式：

#sidebarMenu.open {
    transform: translateX(0) !important;
}

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