いきなりですが、クイズです。
次のスタイルシートを見て下さい。このスタイルシートを適用した結果、h1要素とh2要素の文字は何色になりますか？
h1 { color: red; }
h2 { color: blue; }
h2 { color: blue; }
答えは簡単。h1要素は赤色(red)、h2要素は青色(blue)ですね。
では、次のスタイルシートを見て下さい。このスタイルシートを適用した結果、h1要素とh2要素の文字は何色になるでしょうか？
h2 { color: blue; }
h1 { color: red; }
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のスタイルシートでは、見え方が異なってしまうのです。 違う点は、記述順だけであるにもかかわらず、両者では見え方が異なります。
※補足：
よく使われるのでご存じの方々が多いでしょうが、念のために簡単にご紹介しておきましょう。 上記のソースで使用しているスタイルは、それぞれの条件に合致するリンクに対してのみ有効になります。
- a:link ： まだアクセスしたことのないリンクに適用
- a:visited ： 既にアクセスしたことのあるリンクに適用
- a:hover ： マウスが上に乗っている状態のリンクに適用
- a:active ： 選択されている状態のリンクに適用
記述順が異なるだけで、見え方が異なってしまうのはなぜでしょうか？
