相邻的兄弟选择器不工作

Question

我试图在没有javascript的情况下制作滑动侧边栏，但我遇到了相邻兄弟选择器无法正常工作的问题。

这是我的代码：

＆＃13;

＆＃13;

.sidebar {
  position: fixed;
  top: 100px;
  right: 0px;
  z-index: 0;
  width: 120px;
  height: 100px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.00);
  border-bottom: solid 1px #181918;
  border-left: solid 1px #181918;
}
.sidebar ul li {
  font-family: 'Zona Pro';
  font-size: 18px;
  margin-bottom: 16px;
  -webkit-font-smoothing: antialiased;
  color: rgba(24, 25, 24, 0.78);
  cursor: pointer;
}
#sidebarToggler {
  display: none;
}
#sidebartoggler + .sidebar {
  top: 500px;
}

＆＃13;

<div class="pageWrap">
  <input type="checkbox" id="sidebarToggler" />
  <div class="sidebar">
    <ul>
      <li>Settings</li>
      <li>Log out</li>
    </ul>
  </div>
  <div class="userNameDiv">
    <label for="sidebarToggler">
      Fale1994
    </label>
  </div>
  <div class="pageContent">
    @RenderBody()
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

除了最后一行CSS之外，一切正常。我尝试了一切，没有更多的想法。

点击label后，checkbox更改已选中/取消选中，然后CSS应设置侧边栏属性＆＃39; top＆＃39;如果选中，则500px。我也尝试使用background-color，但它也无效。

Answer 1

你遗失的两件事：

• 来自ckeckbox的:checked
• 您有#sidebartoggler，但CSS区分大小写，因此请使用#sidebarToggler

段

.sidebar {
  position: fixed;
  top: 100px;
  right: 0px;
  z-index: 0;
  width: 120px;
  height: 100px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.00);
  border-bottom: solid 1px #181918;
  border-left: solid 1px #181918;
}
.sidebar ul li {
  font-family: 'Zona Pro';
  font-size: 18px;
  margin-bottom: 16px;
  -webkit-font-smoothing: antialiased;
  color: rgba(24, 25, 24, 0.78);
  cursor: pointer;
}
#sidebarToggler {
  display: none;
}
#sidebarToggler:checked + .sidebar {
  top: 500px;
}

<div class="pageWrap">
  <input type="checkbox" id="sidebarToggler" />
  <div class="sidebar">
    <ul>
      <li>Settings</li>
      <li>Log out</li>
    </ul>
  </div>
  <div class="userNameDiv">
    <label for="sidebarToggler">
      Fale1994
    </label>
  </div>
  <div class="pageContent">
    @RenderBody()
  </div>
</div>

Answer 2

#sidebartoggler:checked + .sidebar

您忘记了:checked。