ＣＳＳでのリンク色の優先順位を教えて。

<div class="t1">
<div class="t2">
aaa
</div>
</div>

.t2 {color:orange;}
.t1 {color:green;}

上記の様なプログラムの場合は、「aaa」はオレンジ色になります。

<div class="t1">
<div class="t2">
<a href="#">aaa</a>
</div>
</div>

.t2 a{color:orange;}
.t1 a{color:green;}

上記の様に、<a>タグでリンクをつけた場合は、「aaa」は緑色になります。

リンクの無い文字列の場合は、内側のclassが優先される。
リンクが有る文字列の場合は、ＣＳＳで下に記述した方が優先される。
この様な解釈で良いですか？

http://creativememomemo.com/css_a_link_color/
上記のサイトの内容は大体理解しています。
しかし、上記のサイトの結論では、内側のclassが優先になる様に思います。
私のどこに勘違いがあるのでしょうか？

No.1 回答者： ORUKA1951 回答日時： 2012/08/05 18:30

根本的な部分で、違います。

　スタイルシートが指定するのは、あくまでその要素です。
　HTMLとは、それを構成する要素に分解して、その要素が文書を構成するどのような要素であるかをタグでマークアップする言語でしたよね。
<div class="t1">
<div class="t2">
aaa
</div>
</div>
は、HTMLの文書構造は
DIV　　　　　　　　　　　　　t1
　|--DIV　　　　　　　　　　t2
　　　|-- #text aaa
ですね。firefox付属のDOMinspectroで見ると表示されます。


　CSS--カスケーディングスタイルシートのカスケーディングを正しく理解してください。
そのサイトの説明は、不正確です。というか酷すぎる。

　そんな難しいややこしいものではありません。

　とてもわかり易くできています。

(ルール1)
・プロパティには継承されるものとされないものがある。
　--常識的範囲ですが、木構造の親の指定が継承されるものとされないものがある。
　colorプロパティは継承されますが、border関連プロパティは継承されません。
　継承されないプロパティでも、値にinheritと記述すれば継承されます。
(ルール２)
・@imprtantは優先されます。
　ユーザー指定の最重要宣言はもっとも優先されます。
　著者指定の宣言はユーザー指定の宣言よりも優先されます。
　ブラウザが持つ宣言は最下位です。(インターネットオプションでの指定とかも)
　ユーザー指定の最重要宣言＞著者の最重要宣言＞著者の宣言＞ユーザーの宣言＞ブラウザの宣言
(ルール３)
・詳細度を計算します。
　a=1・・・・スタイル属性での指定
　b=1・・・・一意セレクタでの指定
　c=1・・・・属性セレクタ/クラスセレクタ/擬似クラスの指定
　d=1・・・・要素セレクタ/擬似要素セレクタの指定
　0・・・・・HTMLの属性での指定、全称セレクタでの指定
この４桁の数値(桁上がりはしない=基数が大きい)で比較します。
(ルール４)
・同じ詳細度だと、後から出現するものが優先されます。

　以上です。とても単純で、常識的です。

<div class="nav">
　<ul>
　　<li><a href="./index.html">Top</a></li>
　　<li><a href="bbb">bbb</a></li>
　　<li><a href="ccc">ccc</a></li>
　</ul>
</div>
に対して
・・・class名は文書構造を補完するものをつけることになっています。
　　→『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』と明記してある。
　　→具体的にはHTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」名が参考になるでしょう。

スタイルシートを実際に記述すると
a:link{}
a:visited{}
a:focus,a:hover{}
a:active{}
の順番で書かなければなりません。いずれも擬似クラス(リンクの擬似クラスと動的な擬似クラス)ですから詳細度は同じ(0,0,1,1=11)ですから、後出のもので上書きされますから。(ルール4)

次に、ナビゲーション内だけのリンクの色を変えたければ、
div.nav ul li a:link{}
div.nav ul li a:visited{}
div.nav ul li a:focus,a:hover{}
div.nav ul li a:active{}
　これらはしいずれも詳細度が(0,0,2,4=24)ですから、出現順番に関わらず、上の指定を上書きします。

　ここで２番目以降だけ、指定を変えたければ
div.nav ul li+li a:link{}
div.nav ul li+li a:visited{}
div.nav ul li+li a:focus,a:hover{}
div.nav ul li+li a:active{}
　詳細度は(0,0,2,5=25)になりました。

div.nav ul li a[href="bbb"]:link{}
とすれば、要素セレクタが一つ増えるので詳細度は(0,0,3,4=34)ですから・・

★それぞれのプロパティが継承されるか否かは、仕様書のプロパティ索引からリンクしていけばわかります。
★セレクタの詳細度の値は、
　6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )
　を見てください。一度見れば覚えられるでしょう。
　(注意)この詳細度の部分は現行のCSS2.1では変更されています。上記リンクはCSS2.1のものですが、邦訳を知りませんので原文へのリンクを上げておきました。

　なお、CSS2以降は、
.t2 a{color:orange;}
.t1 a{color:green;}
のような書き方は、
*.t2 a{color:orange;}
*.t1 a{color:green;}
とみなすことになっています。全称セレクタは詳細度が0です。(CSS1との整合性のため)

　基本は
div.t2 a{color:orange;}
div.t1 a{color:green;}
　と書くようにしましょう。

あやふやなサイトを見るよりは
5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

　など仕様書にまず目を通しましょう。（これはCSS2のものですが、詳細度について変更以外は大きな変更はないので参考になるでしょう。)
　ついでにHTML4.01の仕様書も一通り目を通しておくと良いでしょう。