定位父嵌套元素

Question

我正在尝试使用纯CSS创建下拉菜单。但是我正在努力使用正确的选择器和父元素。我试图将ul定位在与checkbox不同的div中。共同的父母是.site-header和I'm pretty sure我需要使用~，但我尝试了很多组合而没有运气。

label {
  cursor: pointer;
}

.site-nav-toggle #nav-toggle {
  display: none;
}

.navbar {
  display: none;
}

.site-nav-toggle #nav-toggle:checked~.navbar {
  display: block;
}

<header class="site-header">
  <div class="site-brand">
    ...
  </div>
  <nav class="site-nav">
    <ul class="navbar">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </nav>
  <div class="site-nav-toggle">
    <label for="nav-toggle">Menu</label>
    <input type="checkbox" id="nav-toggle" />
  </div>
</header>

Answer 1

为什么不在checkbox之前添加.navbar输入？

然后你必须使用#nav-toggle:checked + .navbar。

label {
  cursor: pointer;
}

#nav-toggle {
  display: none;
}

.navbar {
  display: none;
}

#nav-toggle:checked + .navbar {
  display: block;
}

<header class="site-header">
  <div class="site-brand">
    ...
  </div>
  <nav class="site-nav">
    <input type="checkbox" id="nav-toggle" />
    <ul class="navbar">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </nav>
  <div class="site-nav-toggle">
    <label for="nav-toggle">Menu</label>
  </div>
</header>