所謂擬似クラスですね。

aタグにくっつけて、マウスオーバーの状態かとか、訪問済みかで色や下線をだしわけるといった時に使う、かなり使用頻度の高い子たちです。

んで、これなんですが、実は正しい記述順序というのがあるそうで、それを守らないと意図したとおりに動作してくれないんですよね。

具体的には、

 みたいなかんじで、「link → visited → hover → active」の順で書いて行かないといけない。

なんでだろ？と思っていろいろ調べたところ、セレクタの固有性はすべて同じだからなんだそう。

つまり、あくまでどれも「a」タグに対する記述なので、最後に書いたものから（下から順に）優先されてくるため、例えば、「link→active→hover→visited」といった書き方をしていた場合、

• 未訪問リンクの場合、activeよりhoverが優先されるためactiveが無効になってしまう
• 訪問済みの場合はactiveよりもvisitedが優先されるため、hoverやactiveが効かなくなる。

なので、activeはhoverより後ろに書かないと意味がなくなってしまい、
更に、visitedはactiveやhoverより前に書かないといけない。

でもlinkとvisitedは打ち消し合わないため、ここはどっちでもいいらしい。

ということで、まとめると、「link→visited→hover→active」という順に書くのが正解ということになるんだそうです。

恥ずかしながら実はこれ、知らなかったんですよね。。もっと気をつけて、意識して書いていこうと思います。

ちなみにこの順番の覚え方として、海外では

LOVE and HATE

なんて覚え方があったりするそうですよ。