ブックマークにCSS設定が効いてしまう

質問

CSSで下記のようにリンク色の設定をしました。

a, a:link, a:visited {
color: #0033CC;
text-decoration: underline;
}

a:hover {
color: #FF3300;
text-decoration: underline;
}

ページ内で下記のようにブックマーク移動をさせたいのですが、この文字にも上記の設定（文字色やアンダーライン）が効いてしまいます。
どのようにすれば、文字色とアンダーラインの解除ができるでしょうか。

<h3><a name="koko">ここにブックマーク</a></h3>

回答No.2

leaz024 · ベストアンサー

a, a:link, a:visited の３つに対してスタイルを設定していますが、普通 a:link と a:visited を指定するなら a への指定は不要です。
この a への指定のせいで <a name="koko">ここにブックマーク</a> にもスタイルが反映されてしまっているので、特に問題なければスタイルの設定を
a:link, a:visited {
color: #0033CC;
text-decoration: underline;
}
としてみて下さい。

お礼

なるほど、よくわかりました。
大変助かりました。
ありがとうございました!

回答No.5

hiro_izushi

●ＣＳＳ
/*--通常のリンクのスタイル--*/
a:link,
a:visited {
color: #0033CC;
text-decoration: underline;
}
a:hover,
a:active {
color: #FF3300;
text-decoration: underline;
}

/*--ブックマークのリンクスタイル--*/
a.book_mark:link,
a.book_mark:hover {
color: #0000FF;
text-decoration: none;
}

a.book_mark:visited,
a.book_mark:active {
color: #800080;
text-decoration: none;
}

として、

●ＨＴＭＬ
<h3><a href="oo.html">通常のリンク</a></h3>
<h3><a class="book_mark" name="koko">ここにブックマーク</a></h3>

とすれば、良いですよ。

お礼

クラス指定をせずに外したかったので、leaz024さん、BLUEPIXYさんの方法で解決しました。
ありがとうございました。

回答No.4

sion_fs

もしも、その<a>はname属性以外利用しない（アンカーだけの役目）であるならば、Aタグである必要は有りません。

具体的に言えば、
　<h3><a name="koko">ここにブックマーク</a></h3>
これを以下の通り変更して下さい。
　<h3 id="koko">ここにブックマーク</h3>

お礼

leaz024さん、BLUEPIXYさんの方法で解決しました。
でもとても参考になりました。
ありがとうございました。

回答No.3

BLUEPIXY

a,a:link, a:visited {
を
a:link, a:visited {
にする。
もし、a:activeが必要なら、別に記述する

お礼

大変助かりました。
ありがとうございました!

回答No.1

UsadaYusuke

もしもアンカー(<a name="...">何々</a>という記述)が必ずh3の中にしか使われないのでしたら、例えば

a, a:link, a:visited {
color: #0033CC;
text-decoration: underline;
}

a:hover {
color: #FF3300;
text-decoration: underline;
}

h3 a{
text-decoration: none;
color: #0000FF;
}

でどうでしょうか。

ここでの「h3 a」とは、h3要素の中にある(h3タグに挟まれた)a要素、という意味になります。

お礼

leaz024さん、BLUEPIXYさんの方法で解決しました。
でもとても参考になりました。
ありがとうございました。