Html 选中CSS复选框的问题在我的标题中不起作用

我有一个复选框和标签在我的标题im使用的侧菜单

但是，它不工作，并且正在检查的选择器不工作

请看这里：

单击时应该会显示一个侧栏

但是，当代码中不涉及我的头时，它在这里起作用：

是什么导致了问题

工作代码：

<input type="checkbox" id="menu_collapse_icon">
<label for="menu_collapse_icon" class="menu_collapse_icon_label">Show Menu</label>
<div class="side-navigation">
    <ul>
        <li>
            <a href="#">Login</a>
        </li>
    </ul>
</div>

---

问题在于你的HTML结构

您正在使用

#菜单_折叠_图标：选中~。侧导航

作为选择器。 在与所有

标题集成的非工作示例中，它不工作，因为未选择
侧导航，因为它与
菜单折叠图标不在同一级别

因此，如果将
.side导航
与
#菜单_collapse_图标
放在同一级别，它就会工作

像这样：


。侧面导航{
右：0；
身高：100%；
背景色：白色；
宽度：200px；
边缘顶端：106px；
右边距：-200px；
过渡：余量右移0.5s；
位置：固定；
}
#菜单\折叠\图标：选中~侧导航{
右边距：0；
}
标题{
位置：固定；
高度：100px；
背景颜色：蓝色；
宽度：100%；
}
标题nav ul li{
浮动：左；
}

显示菜单








啊，这很有道理。为了保持这种状态，我只移动了复选框本身。
<header>
<input type="checkbox" id="menu_collapse_icon">
<label for="menu_collapse_icon" class="menu_collapse_icon_label">Show Menu</label>
<div class="side-navigation">
    <ul>
        <li>
            <a href="#">Login</a>
        </li>
    </ul>
</div>
</header>

#menu_collapse_icon:checked ~ .side-navigation {
    margin-right: 0;
}