css - ある div の a:link が別の div の a:link に影響するのはなぜですか?

Question

コンテンツ div とフッター div を使用しています。div ごとに異なるアンカー スタイルがあります。何らかの理由で、私のコンテンツ アンカーはフッター アンカーからスタイルを取得しています。

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;

}

したがって、本文のデフォルトの色が黒で、コンテンツ div の a:link などのスタイルが特に黒に設定されていても、コンテンツ div のリンクは白として表示されます。フッター div の a:link などのスタイルを黒に変更すると、フッターとコンテンツ リンクの両方が黒に変更されますが、フッターは白にする必要があります。「色：黒」を入れてみました。content div に直接入力しましたが、それは役に立ちませんでした。a:hover スタイルと他のすべてが完全に機能します。本当に私を殺しているのは、コードが IE では正常に動作するが、FF では動作しないことです。私は本当に単純なコードを書いていますが、おそらく本当に単純な解決策があるように感じますが、それを理解できないので、どんな助けも大歓迎です!