选中的 CSS 复选框问题在导航中不起作用

【问题标题】：Issues with CSS checkbox checked not working in nav ul选中的 CSS 复选框问题在导航中不起作用
【发布时间】：2020-11-24 10:44:04
【问题描述】：

我有一个这样的复选框，

 <nav>
        <div id="center">
            
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Skill</a></li>
                <li><a href="#">Profile</a></li>

            </ul>

            <input type="checkbox" id="check">
            <label for="check" class="checkbtn">
                <i class="fas fa-bars"></i>
            </label>
        </div>
        

        </nav>

但是，复选框在复选框选择器上不起作用，我不知道为什么。这是我的 CSS 导航和复选框。

 nav ul{
            position: fixed;
            width: 100%;
            height: 200px;
            background: #2c3e50;
            top: 47px;
            display: none;
            text-align: center;
            padding-left: 0;
            transition: all .5s;
    
        }
    #check:checked ~ nav ul {
            display: block;
        }

【问题讨论】：

你的nav ul在哪里？
我已将其添加到问题中

标签： css checkbox

【解决方案1】：

在相关说明中，~ 用于一般后继兄弟（意味着该元素在此之后）。

由于您的ul 位置固定，请将其移动到label 标记之后。

还以 css 样式从 #check:checked ~ nav ul 中删除 nav。

nav ul {
  position: fixed;
  width: 100%;
  height: 200px;
  background: #2c3e50;
  top: 47px;
  display: none;
  text-align: center;
  padding-left: 0;
  transition: all .5s;
}
 
#check:checked ~ ul {
  display: block;
}

<nav>
  <div id="center">
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
      <i class="fas fa-bars"></i>
     </label>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Skill</a></li>
      <li><a href="#">Profile</a></li>
    </ul>
  </div>
</nav>

【讨论】：