スタイルシートの反映のされ方がIEとFirefoxで異なるのは何故？

質問

■スタイルシート側
#style_a{ color:#000000; }
.style_b {}
.style_b a:link{ color:#ff0000; }

■HTML側
<div id="style_a">
<div class="style_b">
<a href="***.html">リンク</a>
</div>
</div>

↑…というようなソースを書いたところ、
Firefox(ver.2.0)では文字色が赤に、
InternetExproler(ver7.0)では黒になってしまいました。

その後、スタイルシートの優先順位は
記述による獲得ポイントによって決まるということを知り、
スタイルシートを以下のように修正することで
両ブラウザとも文字色が赤くなるように解決したのですが、

■スタイルシート側
#style_a{ color:#000000; }
#style_a .style_b {}
#style_a .style_b a:link{ color:#ff0000; }

このポイント制ってブラウザ毎に
微妙に異なるものなのでしょうか？
もしそのあたりを解説してくれている
ホームページや書籍などがありましたら
教えていただけませんでしょうか？
よろしくお願いいたします。

・参考としたページ
http://www.stylish-style.com/csstec/base/order.html

回答No.2

leap_day

こんにちは

Firefoxが正解だと思います
そもそも
<div>
<p>
<a href="">リンク</a>
</p>
</div>
とあった場合<div>や<p>にcolor設定したとしても『リンク』の文字色を変更することはできません
採用されるのはデフォルト、もしくはa { color: ;} 、a:link { color: ;} で設定されているリンク色になります

参考サイトの優先度というのはすべてのcolor指定が『ここは何色になるでしょう？』に対するものだから（セレクタグループの終わりが『p』か『.toi』になっている）成り立っています
今考えていらっしゃるであろう考え方でいくと『#sample p{color:red;}』を『#sample{color:red;}』と変えたとしてもこれでもまだ獲得ポイントは100ポイントで一番高いので文字色は『赤』になるだろうと考えていることになります
でも実際に適用されるのは『.sample2 p{color:blue;}』の青色になります

極端な話・・・
#sample {color:red;}
.sample2 {color:blue;}
li {color:black;}
p {color:yellow;}
とした場合には『p{color:yellow;}』が採用されるということです

ですので、質問HTMLの場合の『リンク』の文字色の優先度は
#style_a .style_b a { color: ; }
#style_a div a { color: ; }
#style_a a { color: ; }
div .style_b a { color: ; }
.style_b a { color: ; }
div div a [ color: ; }
div a { color: ; }
a { color: ; }
になりこれ以外のcolor指定は効かない（デフォルトリンク色になる）と思います

回答No.1

noname#66720

文字が黒くなる状態が再現できませんでした。
IEの場合href属性までつけないとリンクとして認識しないのでそのせいかもしれません。

一応他の参考ページを載せておきます。

参考URL：

http://hyper-text.org/archives/2006/11/important_css_specificity.shtml