Question

我有两个div（链接块），我想要以不同的颜色完全相同，但每当我尝试制作一种不同的颜色时，它只会改变它旁边的div为好。

以下是代码：

#nav1 a:link,a:visited { 
  color: #000000;
  display: inline-block;
  background-color: blue;
  width: 175px;
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: center;
  text-decoration: none; 
  float: left;
 } 
#nav1 a:active,a:hover { 
  color: #000000;
  background-color: orange;
  display: inline-block;
  width: 175px;
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: center;
  text-decoration: none;
  float: left;
}
#nav2 a:link,a:visited { 
  color: #000000;
  display: inline-block;
  background-color: green;
  width: 175px;
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: center;
  text-decoration: none; 
  float: left;
} 
#nav2 a:active,a:hover { 
  color: #000000;
  background-color: pink;
  display: inline-block;
  width: 175px;
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: center;
  text-decoration: none;
  float: left;
}

我给它们制作了不同的颜色，但它们都显示为绿色/粉红色。

HTML：

<div id="nav1"><a href="">LINK1</a></div>
<div id="nav2"><a href="">LINK2</a></div>

提前感谢您的帮助！

Answer 1

您需要为您定位的每个id州声明a，例如：

#nav1 a:link,a:visited {

应该是

#nav1 a:link, #nav1 a:visited {

FIDDLE

新CSS

#nav1 a:link, #nav1 a:visited { 
  color: #000000;
  display: inline-block;
  background-color: blue;
  width: 175px;
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: centerz;
  text-decoration: none; 
  float: left;
} 

#nav1 a:active, #nav1 a:hover { 
  color: #000000;
  background-color: orange;
  display: inline-block;
  width: 175px;
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: center;
  text-decoration: none;
  float: left;
}

#nav2 a:link, #nav2 a:visited { 
  color: #000000;
 display: inline-block;
 background-color: green;
 width: 175px;
 padding-top: 17px;
 padding-bottom: 17px;
 text-align: center;
 text-decoration: none; 
 float: left;
} 

#nav2 a:active, #nav2 a:hover { 
  color: #000000;
  background-color: pink;
  display: inline-block;
  width: 175px;
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: center;
  text-decoration: none;
  float: left;
}

即使我为每个div指定了不同的颜色，两个不同的div也以相同的样式显示

1 个答案: