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

リンクにスタイルを適用するには記述する順番が肝心！

これまでにご説明してきたように、リンクにスタイルを適用する場合には、記述する順番が重要です。
以下の順番を守って記述するようにして下さい。

「 :hover 」を記述する際は、「 :link 」や「 :visited 」よりも後、「 :active 」よりも前に記述します。
「 :active 」を記述する際は、「 :link 」や「 :visited 」、「 :hover 」よりも後に記述します。

要するに、次の順番で常に記述するようにしておけば大丈夫です。

:link
:visited
:hover
:active

※補足：　Internet Explorerの動作
Internet Explorer 6.0 の場合、「まだ行ったことのないリンク（ :link ）」に関しては、記述順を気にせずに「 :hover 」や「 :active 」を記述しても、望み通り色が変わります。しかし、それはスタイルシートの文法的に正しい動作ではありません。また、他の代表的なブラウザでは、この記事でご紹介したように、「 :link 」を後に記述してしまうと、「 :hover 」や「 :active 」のスタイルは有効になりません。ですから、上記でご紹介した順番でスタイルを記述するようにして下さい。

※補足：　上から順番に適用されるとは限りません
前のページで、「上から順番に適用されると考えると分かりやすい」と書いています。これは、この記事でご紹介した状況を理解するには、そのように考えると分かりやすいのではないか、というだけです。
スタイルシートには、「同じスタイルは後に記述した方を優先する」という以外にも、適用優先順位に関する規則があります。ですから、どんな場合でも「上から順番に適用されていく」というわけではありません。他の優先順位規則に該当する場合には、上に記述したスタイルが、下に記述したスタイルよりも優先して採用されることもあります。