スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか? 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効
![:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp](https://cdn-ak-scissors.b.st-hatena.com/image/square/12a57351586c1ad6f3e265deabafe2dd786622e3/height=288;version=1;width=512/https%3A%2F%2Fjmblog.jp%2Fog-images%2F2007-09-25-link-visited-hover-active.png%3F1709033553723)