大きさの違うテキストのマウスオーバーの色を変えたいです！

質問

はじめまして。
WEB制作でとても困っています。。。＞＜
お忙しいところ、恐れ入りますが、
回答どうぞよろしくお願い致します。

下記のように設定しています。
テキストの大きさが違うものを１つのリンクとして一緒に色を変更したいのですが、なぜかエリアは一緒に設定できるのですが、「10」の数字だけ色が変わりません。。。
<span>の設定に原因があるのでしょうか？？？

＞＞＞CSS＞＞＞
a, a:link {
color:#333333;
line-height:170%;
font-family:"ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka, "Hiragino Kaku Gothic Pro";
text-decoration: none;
}
a:visited {}
a:hover {
color: #FF3300;
text-decoration:none;
}

.text_bk_01 {color: #000000;font-size: 14px;line-height: 1.8em;}
.text_bk_00 {color: #000000;font-size: 8px;}

＞＞＞XHTML＞＞＞
<ul>
<li class="text_bk_01"><a href="＃">テキスト<span class="text_bk_00">10</span></a></li>
</ul>

回答No.1

hetare560

こんにちは。

a, a:link {
color:#333333;
line-height:170%;
font-family:"ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka, "Hiragino Kaku Gothic Pro";
text-decoration: none;
}

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

.text_bk_01 {font-size: 14px;line-height: 1.8em;}
.text_bk_00 {font-size: 8px;}

これでできませんか？

colorをあらゆる要素に指定してますけど、絞ったほうがいいですよ。

例えばliの中にあるaに対してはa, a:linkで指定したcolor:#333333
で統一させて.text_bk_01,.text_bk_00ではカラーを指定しないようにするとか

お礼

回答ありがとうございました。

.text_bk_01,.text_bk_00のカラー設定を消去してみました！

あとa:hover .text_bk_00 {/*マウス載ったときの設定*/}の設定を
してみたらうまくできました。

どうもありがとうございました！