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

Question

我有这两个 divs（链接块），我希望它们完全相同，只是颜色不同，但每当我尝试制作不同颜色之一时，它就会改变还有旁边的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;
}

我给它们分别做了不同的颜色，但它们都出现了 green/pink。

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

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

Two different divs are showing up in the same style even though I specified different colours for each

html

css