已选中 CSS 复选框的问题在 nav ul 中不起作用

Question

我有一个这样的复选框，

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

Answer 1

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

因为你的 ul 有固定的位置，所以把它移到 label 标签之后。

同时从 #check:checked ~ nav ul 中删除 css 样式的 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>

已选中 CSS 复选框的问题在 nav ul 中不起作用

Issues with CSS checkbox checked not working in nav ul

css

checkbox