css - 为什么a :link in one div affect the a:link in another?

Question

我正在使用内容 div 和页脚 div。我为每个 div 设置了不同的 anchor 样式。出于某种原因，我的内容 anchor 采用了页脚 anchor 的样式，我一生都弄不明白这是为什么!

这是 HTML:

<div class="content">
  <h1>WELCOME</h1>
  <p>Content content content. Click <a href="index.html">here</a> for more information.</p>
</div>

<div class="footer">
  <p><a href="index.html">Home</a> &mdash; <a href="">Printable Forms</a> &mdash; <a href="">Ad Rates</a> &mdash; <a href="">Contact Us</a></p>
</div>

这是 CSS:

body
{

  background-color: #c8d3fc;
  color: black;
  font-family: Times New Roman;
  font-size: 12pt;

}


.content
{

  display: block;
  float: left;
  margin-left: 261px;
  width: 827px;
  background: url('../images/contentBG.jpg') repeat-y;

}


.content a:link, a:visited, a:active
{

  color: black;
  text-decoration: none;
  font-weight: bold;

}


.content a:hover
{

  text-decoration: none;
  color: #ff9e00;
  font-weight: bold;

}


.footer
{

  display: block;
  float: left;
  margin-left: 261px;
  width: 827px;
  height: 78px;
  background: url('../images/footerBG.jpg');
  color: white;

}


.footer a:link, a:visited, a:active
{

  text-decoration: none;
  color: white;

}


.footer a:hover
{

  text-decoration: none;
  color: #ff9e00;

}

因此，即使我的正文默认颜色为黑色并且我的 a:link 等内容 div 的样式专门设置为黑色，但内容 div 中的链接显示为白色。如果我将页脚 div 的 a:link 等样式更改为黑色，它会将页脚和内容链接都更改为黑色，但我需要页脚为白色。我试过把“颜色:黑色；”直接在内容 div 中，但这没有帮助。 a:hover 样式和其他一切都完美无缺。真正让我失望的是代码在 IE 中运行良好，但在 FF 中却不行。我编写了非常简单的代码，感觉可能有一个非常简单的解决方案，但我就是想不通，所以非常感谢任何帮助!

Answer 1

您的选择器有问题。

.content a:link, a:visited, a:active {}

应该是:

.content a:link, .content a:visited, .content a:active {}

页脚链接也是如此:

.footer a:link, .footer a:visited, .footer a:active {}