html – 相邻的兄弟选择器不工作

2023年11月8日 154次阅读

我正在尝试制作一个没有
javascript的滑动侧边栏,但是我遇到了一个相邻兄弟选择器无法正常工作的问题.

这是我的代码：

.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;
}
<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>

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

单击标签时,复选框更改选中/取消选中,然后CSS应将侧边栏属性“top”设置为500px(如果选中).我也尝试了背景色,但它也无法正常工作.

最佳答案 你缺少的两件事：

>：从ckeckbox检查
>你有#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>
点赞