页面选择和识别

Question

#bannercontainer{
	height: 200;
	width: 960;
}
#banner1{
	height: 100px;
	width: 960px;
	background-color: white;
}
#banner2 {background-color: #4D4C4C;
	color: white;
	height: 100px;
	width: 960px;
	position: static;
}
.logo {
	width: 433px;
	height: 199px;
	float: left;
}
.linkcontainer{
	height: auto;
	width: auto;
	vertical-align: bottom;
	position: absolute;
	bottom: 0px;
}
a:active{ color: grey;
	font-weight: bold;
	background-color: white;
	
}
a, a:visited { color: white;
	text-decoration: none;	
}


#link {
	padding-top: 10px;
	margin-right: 30px;
	margin-bottom:20px;
	font-size:15pt;
	font-weight: bold;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	display:inline-block;
	position:relative;
	float:right;
	
  }
.selector { 
	background-color: white;
	color: #4D4C4C;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 3px;
	font-weight: bold;
}

<div id="bannercontainer">
	<div id="banner1">
	<div id="logo"><a href="index.html"><img src="img/Dulwich Design Banner.png" width="434" height="200" alt=""></a></div>
	</div>
	<div id="banner2">
		<div id="link"><div id="selector"><a href="index.html">Home</a></div></div>
	<div id="link"><a href="about.html">About</a></div>
	<div id="link"><a href="blog.html">Blog</a></div>
	<div id="link">Contact</div><div id="link"> Projects</div>
	</div>
</div>

因此，当用户在给定页面上时，我希望链接为白色，而“选择器”类具有白色背景和灰色文本，主要是为了在页面处于活动状态时反转颜色。任何帮助将不胜感激。

Answer 1

由于您的元素使用id代替class selector

，因此无法使用它

所以从这个：

<div id="link">
   <div id="selector">
      <a href="index.html">Home</a>
   </div>
</div>

将其更改为：

<div id="link">
 <div class="selector">
  <a href="index.html">Home</a>
 </div>
</div>

您的css，更新您的.selector并为文字颜色添加.selector a：

.selector { 
    background-color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
    font-weight: bold;
}

.selector a {
  color: #4D4C4C;
}

Fiddle

另请注意，在多个元素上使用相同的id并不好，您应该使用class。我引用了links id。

的多个元素