html – 页面选择和识别

2023年3月13日 218次阅读 
#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>

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

最佳答案 它之所以不起作用的原因是因为你的元素使用id代替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.我指的是带有链接ID的多个元素.

点赞