※ ChatGPTを利用し、要約された質問です（原文：IE6でaタグのvisitedより、aタグ内のクラスに指定した文字色を優先する方法について）
IE6でaタグのvisitedより、aタグ内のクラスに指定した文字色を優先する方法について
このQ&Aのポイント
CSSでIE6でaタグのvisitedより、aタグ内のクラスに指定した文字色を優先する方法について知りたいです。
IE6での動作はaタグのvisitedが効いており、aタグ内のクラス指定が優先されません。Firefox2とIE7はaタグ内のクラス指定が優先されています。
wrapper内のaタグのスタイルシートをそのままに、aタグ内のクラスで特定の箇所のリンクの文字色を変えたいです。クラスで対応したい理由はデザインを一元管理するためです。
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. インラインスタイルシートで記述すると、デザインを一元管理できなくなるなどの関係上、クラスで対応したい(一箇所の修正ですべてのページを反映させたい)とおもいます。
以上、よろしくお願いします。
お礼
ありがとうございます。 ご教示いただいたcssに変更した所、IE6,Firefox2で意図した動作をする事を確認いたしました。 IE7は今手元にないので確認できてないのですが、多分大丈夫だと思います。 どうもありがとうございました。 以上、よろしくお願いします。