html - 页面选择和识别

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 而不是 selector 的 class

从这里开始:

<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 的多个元素。