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

Question

我有这两个 div(链接 block )，我希望它们完全相同，只是颜色不同，但每当我尝试制作不同颜色之一时，它也会更改旁边的 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

您需要为您定位的每个 a 状态声明 id，例如:

#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;
}