html - 可以:checked selector affect a div with which has no relation?

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>