Question

x <=> xy[0]
y <=> xy[1]

		*{
			margin:0;
			padding:0;
			box-sizing:border-box;
			font-family:verdana;
			font-size:17px;
			color:white;
		}
		#main{
			
			display:flex;
			background-color:#aaa;
		}
		#parent-ul{
			display:inline-flex;
			justify-content:flex-end;
			list-style-type:none;
			background-color:#aaa;
			flex-wrap:wrap;
			
		}

		#parent-ul li a{
			
			text-decoration:none;
		}

		.logo{
			display:inline-flex;	
			margin-right:auto;
			margin-left:20px;
			margin-top:20px;
			margin-bottom:20px;
			color:white;
		}
		.nav-items{
			margin-right:20px;
			margin-top:20px;
			margin-bottom:20px;
			flex-shrink:1;
			flex-grow:0;
		}
		.nav-checkbox{
			display:none;
		}

		@media screen and (max-width:460px){
		.nav-checkbox{
			display:block;
			margin-top:30px;
		}
		nav{
			display:none;
		}


		input[type=checkbox]:checked ~ nav{
			display:block;
			background-color:red;
			position: absolute;
		   }

		*{
			margin:0;
			padding:0;
			box-sizing:border-box;
			font-family:verdana;
			font-size:17px;
			color:white;
		}
		#main{
			
			display:flex;
			background-color:#aaa;
		}
		#parent-ul{
			display:inline-flex;
			justify-content:flex-end;
			list-style-type:none;
			background-color:#aaa;
			flex-wrap:wrap;
			
		}

		#parent-ul li a{
			
			text-decoration:none;
		}

		.logo{
			display:inline-flex;	
			margin-right:auto;
			margin-left:20px;
			margin-top:20px;
			margin-bottom:20px;
			color:white;
		}
		.nav-items{
			margin-right:20px;
			margin-top:20px;
			margin-bottom:20px;
			flex-shrink:1;
			flex-grow:0;
		}
		.nav-checkbox{
			display:none;
		}

		@media screen and (max-width:460px){
		.nav-checkbox{
			display:block;
			margin-top:30px;
		}
		nav{
			display:none;
		}


		input[type=checkbox]:checked ~ nav{
			display:block;
			background-color:red;
			position: absolute;
		   }

我检查了伪元素不起作用，它没有显示导航栏元素，正在使用复选框黑客开发响应式导航栏。

Answer 1

您忘记关闭<a>标签。

<div class="logo"><a href="">Sweets</a></div>

		*{
			margin:0;
			padding:0;
			box-sizing:border-box;
			font-family:verdana;
			font-size:17px;
			color:white;
		}
		#main{
			
			display:flex;
			background-color:#aaa;
		}
		#parent-ul{
			display:inline-flex;
			justify-content:flex-end;
			list-style-type:none;
			background-color:#aaa;
			flex-wrap:wrap;
			
		}

		#parent-ul li a{
			
			text-decoration:none;
		}

		.logo{
			display:inline-flex;	
			margin-right:auto;
			margin-left:20px;
			margin-top:20px;
			margin-bottom:20px;
			color:white;
		}
		.nav-items{
			margin-right:20px;
			margin-top:20px;
			margin-bottom:20px;
			flex-shrink:1;
			flex-grow:0;
		}
		.nav-checkbox{
			display:none;
		}

		@media screen and (max-width:460px){
		.nav-checkbox{
			display:block;
			margin-top:30px;
		}
		nav{
			display:none;
		}


		input[type=checkbox]:checked ~ nav{
			display:block;
			background-color:red;
			position: absolute;
		   }

<!DOCTYPE html>
<html>
<head>
<link rel ="stylesheet" type="text/css" href ="styles.css">
</head>
<body>
<div id="main">
<div class="logo"><a href="">Sweets</a></div>
<input type="checkbox" class="nav-checkbox" id="icon">
<nav>
<ul class="parent-ul" id="parent-ul">
<li class="nav-items"><a href="">Home</li>
<li class="nav-items"><a href="">About-Us</li>
<li class="nav-items"><a href="">Tours</li>
<li class="nav-items"><a href="">Contact-Us</li>
</ul>
</nav>
</div>
</body>
</html>

伪选择器：选中不显示前一个div

1 个答案: