:checked 选择器可以影响一个没有关系的 div 吗？

Question

我的一些问题是尝试遵循一些关于屏幕外导航菜单的教程，但它们不太符合我的要求。这是一个 example

我想在这里完成的事情有点困难，我找不到答案。我想要的是按下标签并切换侧边栏。大多数教程显示但只有当这两者直接相关时。

<div class="header">
   <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>
          <input type="checkbox" class="sidebar__toggle" id="sidebar__toggle">
          <label for="sidebar__toggle">More info</label>
      </li>
   </ul>
</div>
<div class="content">
    ...rest of code here...
</div>
<div class="sidebar">
    ...sidebar code here...
</div>

和css（为简单起见，我将省略其余部分）：

.sidebar__toggle:checked  ~ .sidebar {
    background-color: pink;
}

当我按照网络上的各种教程进行操作时，如果它们以某种方式与我们相关，这就是方法，但我的（或我需要的）实际上不是。

Answer 1

只要标签使用 for 属性指向其 id，您就可以将复选框放在任何您想要的位置。我把它放在下面的.sidebar前面：

.sidebar__toggle:checked  ~ .sidebar {
    background-color: pink;
}

<div class="header">
   <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>
          <label for="sidebar__toggle">More info</label>
      </li>
   </ul>
</div>
<div class="content">
    ...rest of code here...
</div>
<input type="checkbox" class="sidebar__toggle" id="sidebar__toggle">
<div class="sidebar">
    ...sidebar code here...
</div>

:checked 选择器可以影响一个没有关系的 div 吗？

Can :checked selector affect a div with which has no relation?

html

css

navigation

menu

slidetoggle