我是前端的新手，正在学习它，但今天我被卡住了，我正在css中创建一个完全响应的导航栏。我已经检查了这个检查按钮是否正常工作，但为什么它没有显示导航菜单。我不知道为什么这个#check:checked~.菜单栏不工作。我知道在那里我可以很容易地找到这些代码，但现在的学习过程中，我向社区提出了这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<title>Startup Landing</title>
<style>body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--hero-background:#E5E5E5;
--purple-clr:#8D448B;
--fonts:'DM Sans', sans-serif;
}
a{
text-decoration: none;
font-size: 18px;
font-family: var(--fonts);
}
#check{
display: none;
}
.bars{
display: none !important;
}
.container{
width:1400px;
height: auto;
margin:0 auto;
}
.hero-section{
display: flex;
align-items: center;
justify-content: space-between;
}
.menu-bar{
width:100%;
}
.menu-bar ul{
display: flex;
align-items: center;
justify-content: center;
margin-right:30px;
}
.menu-bar ul li{
margin-right:50px;
list-style-type: none;
}
.menu-bar ul li a{
color: var(--purple-clr);
font-weight: 500;
}
.head-button{
margin-right:30px;
border:2px solid var(--purple-clr);
padding: 7px 25px;
border-radius: 4px;
font-family: var(--fonts);
color: #8D448B;
font-weight: 500;
transition: all .3s;
}
.head-button:hover{
background-color: var(--purple-clr);
color:#fff;
}
@media screen and (max-width: 800px){
body{
overflow: hidden;
}
.bars{
display: block !important;
color: #8D448B;
margin: 0 auto;
}
.logo{
margin:15px 15px;
}
.menu-bar{
position:absolute;
top:70px;
left: -100%;
transition: all 0.5s;
}
.menu-bar ul{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--purple-clr);
width: 100%;
height: 100vh;
}
.menu-bar ul li{
margin:20px
}
.menu-bar ul li a{
color: #fff;;
font-size:30px;
}
#check:checked ~ .menu-bar {
left:0;
}
}
</style>
</head>
<body>
<header>
<div class="hero-section">
<div class="logo">
<img src="images/logo.png">
</div>
<nav class="menu-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Conatct</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<input type="checkbox" id="check">
<label for="check">
<i class="fa-solid fa-bars fa-2x bars" onclick="toggleMenuOption"></i>
</label>
<div class="head-button">Register</div>
</div>
</header>
</body>
</html>
css~是通用的同级选择器。在MDN上，你可以读到">一般的兄弟组合子(~(分离两个选择器，并匹配第二个元素的所有迭代，这些迭代在第一个元素之后(尽管不一定立即(，并且是同一父元素的子元素"；
因此，它允许您选择在元素之后出现的同级，而不是在元素之前。
您的输入位于菜单之后，因此在这种情况下不能使用普通同级。
我创建了一个非常简单的示例来向您展示如何使用~Css选择器。这里我只是切换nav元素的display，但你可以做任何你想做的css更改。。。
.nav {
display: none;
}
.input:checked ~ .nav {
display: block;
}<input type="checkbox" id="myInput" name="myInput" class="input">
<label for="myInput">Check me</label>
<nav class="nav">
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</nav>