リンクの色を2色で使い分けたい

質問

はじめまして。
良かったらどなたか教えて下さい。

今、一枚のページを作っているのですが、背景色を"#ffffff"（白）とし、そのリンクを以下の様に指定しました。

<style type="text/css">
<!--
A { text-decoration: none}
A:link {color:#000000;}
A:visited {color:#ffffff;}
A:hover {color:#ff6600;}
-->
</style>

「白地に黒文字リンク、オンマウス時はオレンジ」という指定です。

ところが、同じページ内でテーブルを組み、その背景を#000000と指定する事になりまして、その中にリンクを入れると、「黒字に黒文字リンク、オンマウス時はオレンジ」
でリンクの文字が見えなくなってしまいます。

hoverの効果（オンマウス時はオレンジ）の効果を残しつつ、リンク色を二色に分ける方法は無いでしょうか？
（クラス指定の使い方がよく判ってないので、自分で指定するとエラーしか出ないのです）。

お忙しい所申し訳ございませんが、宜しくお願い致します。

回答No.1

flowermaze · ベストアンサー

たとえば、「基本は黒文字、テーブル内のリンクの場合は訪問前も訪問後も白文字」とするなら、

A { text-decoration: none}
A:link {color:#000000;}
A:visited {color:#ffffff;}
A:hover {color:#ff6600;}

table A:link {color:#FFFFFF;}
table A:visited {color:#FFFFFF;}

で適用されると思います。
また、Aタグそのものにクラス指定（<a class="style1">など）をして

A.style1:link { color: #FFFFFF;}

と指定する方法や、背景を黒くするテーブルにクラスを指定（<table class="style2">）し

table { background-color: #000000;}
table a:link {color: #FFFFFF;}
table a:visited {color: #FFFFFF;}

と指定する方法があります。

なお、テーブルの背景色をbgcolor属性で指定し、リンク色をスタイルシートで指定してしまうと、スタイルシートを適用させないブラウザで真っ黒になってしまいますので、テーブルの背景色や文字の色もスタイルシートで指定することをおすすめします。

お礼

lowermazeさん、早速の回答ありがとうございます！
今試してみました。見事に変わりました！ありがとうございます！

ところが、うっかり忘れていたのですが、実はテーブルの中に更にテーブルを組んでおりまして、こちらのリンク色が最初に組んだテーブル内のリンクとは別の色指定をしないと不都合が出てしまう事が判りました。

計3色のリンクを使い分ける事になります。
今、テーブル別にクラス指定をどうするのか、悩んでいる所です。

もう一つ。
テーブルの背景色をbgcolor属性で指定し、リンク色をスタイルシートで指定してしまうと、スタイルシートを適用させないブラウザで真っ黒になってしまう、というのを今回初めて知りました。
ありがとうございます。
早速こちらを改めさせて頂きました。