リンクの文字の色の反転についてです。

メモ帳でホームページを作っているものです。
外部sscを使って、リンクの文字の色の反転を、同じページ内でもセクション（文章や段落など）によって色を違うようにしたいのですが、

htmlを<a href="…">…</a>で、
sscをa:hover　{color: #fcc800;}
と指定するとそのページ内で一色しか指定することができません…
なので、リンクの色の反転を場所によって違うようにする方法をご教示ください。お願いします。

No.4 ベストアンサー 回答者： applekatekyo 回答日時： 2013/08/21 22:01

まずＣＳＳで

#link1 a:hover {
color:#ff0000;
}

#link2 a:hover {
color:#0033cc;
}

#link3 a:hover {
color:#00ffff;
}

あとは
<div id=link1><a href="index.html">1</a></div>
<div id=link2><a href="index.html">2</a></div>
<div id=link3><a href="index.html">3</a></div>

いかがですか

この回答へのお礼

ありがとうございます。うまくいきました！

お礼日時：2013/08/27 20:51

No.3 回答者： ORUKA1951 回答日時： 2013/08/21 10:28

　CSS（sscじゃありません。

小文字じゃありません）はCascading Style Sheetsの略で、Cascadingは、このスタイルシートの最も根幹となる仕組みです。それを知らずしてCSSは使えません。!!!
　⇒REC-CSS2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
においても、color:redなどのプロパティの説明よりも先に
5. セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
6. 値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
と、プロパティより先に説明されています。
color:redを知っているなら、当然
div.section a{color:red;}
div.section p a{color:green;}
div.section p+p a{color:blue;}
も分からなければなりませんよ。

a[href]{color:blue;text-decoration:underline;}
a[href]:visited{color:magenta;}
などは、ブラウザがデフォルトで持っています。優先順位は最下位です。
div.nav a{text-decoration:none;color:green;}
とかで、ナビゲーション中のa要素に対してスタイルを指定したりします。

このセレクタや、詳細度の計算、カスケーディング仕組みは、とても重要でCSSの命ともいえる部分ですから、この様な掲示板で簡単に答えられる内容ではありません。

[例]
<div class="nav">
　<h2>サイトマップ</h2>
　<p>当サイトの<a href="./sitemap.html">詳しいサイトマップはこちら</a>です。</p>
　<ol>
　　<li><a href="/">Top</a></li>
　　<li><a href="/books">Books</a></li>
　　<li><a href="/profile">Profile</a></li>
　</ol>
</div>
に対して、それぞれのAに対して色やデザインを変えるのはいとも簡単にできます。
a:link{color:red;}
div.nav ol li a:link{color:green;}
div.nav p a{color:white;background-color:white;}
div.nav ol li+li a{color:yellow;}
div.nav ol li a[href="profile"]{color:blue;}
とか・・・

まず、セレクタやカスケーディングの仕組みを学びましょう。

この回答へのお礼

細かい説明、ありがとうございます。
もっと勉強しようと思います。

お礼日時：2013/08/27 20:53

No.2 回答者： kmee 回答日時： 2013/08/21 00:02

どんな構造のHTMLか、どのaタグをどういう色にしたいのか、等々、不明な点が多過ぎて、具体的なCSSは書けません

(HTML補足されても、やるつもりはありませんが)

御自身のHTMLがどんな構造になっているか調べて、その構造に合せて、あるaタグを特定するにはどうすればいいか、御自身でお考えください。

div.classA a:hover { ... }
の例は
<div class="classA">
.....<a href="...."> .....
</div>
という構造になっている時の、<div>～</div>のa:hoverに適用されるものです。

この回答へのお礼

もっと自分で考えてみようと思います。

お礼日時：2013/08/27 20:54

No.1 回答者： kmee 回答日時： 2013/08/20 22:35

「CSS セレクタ」で検索。

勉強してください。

div.classA a:hover { ... }
(class属性にclassAが指定してあるdivタグ内の a:hover に適用)
等といったことができます。

この回答へのお礼

早速のご回答ありがとうございます。
『div.classA a:hover { ... }
(class属性にclassAが指定してあるdivタグ内の a:hover に適用)
等』
は具体的に書くと、どのような感じになるのですか？　申し訳ございません。

お礼日時：2013/08/20 23:13