ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
QNo.4170742 IE6でaタグのvisitedより、aタグ内のクラスに指定した文字色を優先する方法について
質問者：iroha_168 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. インラインスタイルシートで記述すると、デザインを一元管理できなくなるなどの関係上、クラスで対応したい(一箇所の修正ですべてのページを反映させたい)とおもいます。

以上、よろしくお願いします。
困り度：
  • すぐに回答を！
質問投稿日時：
08/07/12 14:39
この質問に対する回答は締め切られました。

回答良回答20pt
ANo.1 IE6で試してないんですが…、これでどうでしょう？

----------------------------------------------------
.wrapper a.fontcolor {
color:red;
}
----------------------------------------------------
↓
----------------------------------------------------
.wrapper a.fontcolor, .wrapper a.fontcolor:visited {
color:red;
}
----------------------------------------------------
回答者：oka5130
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：
08/07/12 15:59
この回答へのお礼ありがとうございます。
ご教示いただいたcssに変更した所、IE6,Firefox2で意図した動作をする事を確認いたしました。
IE7は今手元にないので確認できてないのですが、多分大丈夫だと思います。

どうもありがとうございました。
以上、よろしくお願いします。
 
スポンサーサイト（詳細）
このページのトップへ