IE6でaタグのvisitedより、aタグ内のクラスに指定した文字色を優先する方法について
CSSで一箇所分からない所がございましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。
【やりたいこと】
1. ページ内の特定の箇所(下記のソースでは「1」の文字)のリンクのみ文字色(aタグの「未訪問」、「訪問済み」、「訪問中」、「マウスがリンクに乗っている」をすべて同一にしたい)を変えたいと思います(他の大半のリンク色は特定の色が指定されています)。
【状況】
下記のソースをコピペしたhtmlをIE6で立ち上げ、「1」の文字をクリックすると「1」の文字が緑色に変わりました。
多分a:visitedが効いているのだと思います。
一方Firefox2で同じ動作をした所、「1」の文字色は赤色となります。
これはaタグ内のクラスの指定が優先されているのだと思います。
なおIE7はFirefox2と同様の動作となりました。
ちなみに私はこの部分を赤色にするつもりで記述しておりますので、Firefox2とIE7は意図したとおりの動作となり、IE6は意図していない動作となります。
こちらで検証した所、該当箇所のクラスをインラインスタイルシートで記述しなおせばIE6でも赤色で表示されたのですが、「デザインを一元管理したい」「変更箇所が多い」などの関係上、インラインスタイルシートではなく、クラスで記述したいと思います。
↓IE6では緑色(Firefox2, IE7では赤色)になります(NG)。
<a class="fontcolor" href="index.html">1</a>
↓IE6,Firefox2, IE7で赤色になります(OK)。
<a style="color:#FF0000" href="index.html">1</a>
【ソースコード(index.html)】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>sample</title>
<style type="text/css">
<!--
.wrapper a {
color:blue;
}
.wrapper a:visited {
color:green;
}
.wrapper a:hover {
color:yellow;
}
.wrapper a.fontcolor {
color:red;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!-- 略 -->
<a class="fontcolor" href="index.html">1</a>
<a href="index.html">2</a></div>
<!-- 略 -->
</body>
</html>
なお<div class="wrapper">内には(省略しておりますが)多数のリンクがある関係上、下記の条件を満たしている方法をご存知の方がいらっしゃいましたら、ご教示いただければと思います。
1. wrapperのaタグのスタイルシートの記述はそのままでお願いします
(ここですべてのリンクの文字色を一括制御し、特定の箇所のリンク色のみ変えるという記述をしている関係上、ここを変更すると多数の記述を修正しないといけなくなると思う為です)。
2. インラインスタイルシートで記述すると、デザインを一元管理できなくなるなどの関係上、クラスで対応したい(一箇所の修正ですべてのページを反映させたい)とおもいます。
以上、よろしくお願いします。
お礼
回答ありがとうございました。 ようやく理解できました。 (^^;