如何更改空span标签的颜色

Question

我无法更改我用于汉堡菜单的空span标签的颜色。

我尝试了一些事情，虽然我对编码很新，所以任何帮助都会非常感激。

// javascript Document
function toggleSidebar(ref) {
  ref.classList.toggle('active');
  document.getElementById('sidebar').classList.toggle('active');
}

@charset "UTF-8";
/* CSS Document */
	body {
	font-family:optima;
}

body, html {
	margin:0;
	padding:0;
	width: 100%;
	height:100%;
}
video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 1;
}
body{
  font-family:"Arial", Serif;
  background-color:#f4f4f4;
  overflow-x:hidden;
}


.text {
	z-index: 2;
	color: #FFFFFF;
	position: absolute;
	font-family: optima;
	left: 50px;
	top: 50px;
	font-size: 30px;
	letter-spacing: 4px;
	font-weight:300;
	
}
#sidebar {
  position:relative;
  top:0px;
  left:0px;
  width:300px;
  height:125vh;
  background-color: transparent;
  text-align:center;
  transform-origin:left;
  transform:perspective(1200px) rotateY(90deg);
  transition:all 400ms ease;
	z-index: 5;
}
#sidebar ul li {
  color:white;
  font-size:20px;
  width:100%;
  height:50px;
  border-bottom:1px solid #222222;
  line-height:50px;
}
#sidebar.active {
  transform:perspective(1200px) rotateY(0deg);
}



#toggle-btn {
  position:absolute;
  left:30px;
  top:20px;
  transition:left 200ms linear 0ms,transform 300ms ease 100ms;
}
#toggle-btn.active {
  left:230px;
  transform:rotate(360deg);
}
#toggle-btn span {
  position:relative;
  top:0px;
  display:block;
  background:#1a1a1a;
  width:30px;
  height:5px;
  margin:5px 0px;
  cursor:pointer;
  transition:transform 300ms ease 200ms;
}
#toggle-btn.active span:nth-child(1) {
  top:10px;
  transform:rotate(45deg);
}
#toggle-btn.active span:nth-child(2) {
  opacity:0;
}
#toggle-btn.active span:nth-child(3) {
  top:-10px;
  transform:rotate(-45deg);
}
span {
	z-index: 2;
	background-color:white;
}
.sidebar {
	color: white;
	position: relative;
	z-index :2;  
	
	
	
}
.list {
	color:white;
	
}
ul {
	list-style:none;
}


}

}
ul li a:hover{
	text-decoration: underline;
} 
ul li:hover ul li{
	display: block;
}
ul li ul li{
	display: none;
}
#sidebar {
	font-family: optima;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0"
	  <title>Melanie Pullen</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>

<div class="openvid">
	<video poster="road.jpg" autoplay="true" loop muted> 
		<source src="drive.mp4" type="video/mp4">
		

	</video>	
		<div class="text">MELANIE PULLEN</div>
</div>	

	<div id="sidebar">
	<ul>
		<li><a>WORKS</a></li>
		<li><a>INSTALLATION VIEWS</a></li>
		<li><a>UPCOMING SHOWS</a></li>		
		<li><a>PRESS</a></li>
		<li><a>BOOKS</a></li>
		<li><a>BIOGRAPHY</a></li>
		<li><a>CONTACT</a></li>
		
		</ul>
	
	</div>
	 <div id="toggle-btn" onclick="toggleSidebar(this)">
  <span></span>
  <span></span>
  <span></span>
</div>
  
    <script  src="index.js"></script>
	
</body>
</html>

在此先感谢我也想知道为什么x按钮不起作用

Answer 1

另一答案