実は重要！スタイルシートの記述順！ [ホームページ作成] All About

いきなりですが、クイズです。

次のスタイルシートを見て下さい。このスタイルシートを適用した結果、h1要素とh2要素の文字は何色になりますか？

h1 { color: red; }

h2 { color: blue; }

答えは簡単。h1要素は赤色(red)、h2要素は青色(blue)ですね。

では、次のスタイルシートを見て下さい。このスタイルシートを適用した結果、h1要素とh2要素の文字は何色になるでしょうか？

h2 { color: blue; }

h1 { color: red; }

h1要素とh2要素に対するスタイルの記述順が変わっています。
しかし、答えは一緒。h1要素は赤色(red)、h2要素は青色(blue)ですね。
どのような順番で記述しても一緒です。

では、本題です。次の2つのスタイルシート^※をよく見て下さい。

■スタイルシートA：

a:link	{	color: red;	}

            a:visited	{	color:	purple;	}

            a:hover	{	color: green;	}

            a:active	{	color:	yellow;	}

■スタイルシートB：

a:active	{	color:	yellow;	}

            a:hover	{	color: green;	}

            a:link	{	color: red;	}

            a:visited	{	color:	purple;	}

リンクの状態に応じて適用するスタイルを変化させるスタイルシートですね。
こちらも先ほどの例と同じように、記述する順番が異なっているだけです。さて、このA・Bのスタイルシートを適用した結果、それぞれどう見えるでしょうか？

やはり、どちらも同じように見えるでしょうか？

実は違います。上記のA・Bのスタイルシートでは、見え方が異なってしまうのです。 違う点は、記述順だけであるにもかかわらず、両者では見え方が異なります。

※補足：

よく使われるのでご存じの方々が多いでしょうが、念のために簡単にご紹介しておきましょう。上記のソースで使用しているスタイルは、それぞれの条件に合致するリンクに対してのみ有効になります。

記述順が異なるだけで、見え方が異なってしまうのはなぜでしょうか？