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

質問

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

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

回答No.4

applekatekyo · ベストアンサー

まずＣＳＳで

#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>

いかがですか

お礼

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

回答No.3

ORUKA1951

CSS（sscじゃありません。小文字じゃありません）はCascading Style Sheetsの略で、Cascadingは、このスタイルシートの最も根幹となる仕組みです。それを知らずしてCSSは使えません。!!!
　⇒REC-CSS2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )
においても、color:redなどのプロパティの説明よりも先に
5. セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
6. 値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
と、プロパティより先に説明されています。
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;}
とか・・・

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

お礼

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

回答No.2

kmee

どんな構造のHTMLか、どのaタグをどういう色にしたいのか、等々、不明な点が多過ぎて、具体的なCSSは書けません
(HTML補足されても、やるつもりはありませんが)

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

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

お礼

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

回答No.1

kmee

「CSS セレクタ」で検索。勉強してください。

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

お礼

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