でん⚡きかいでんのブログ

3Dプリンター、3DCG、PC、電子工作、HTML、CSS、ミシン、ペンタブレット、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。PC関連機器の使用感レビューなど。

2015.02.11 [水]

a:link { の順序

順番は重要だった

　今まで全然気にしてなかったんですが、実は並べる順番が重要でした。
　CSS内で、ちゃんとこう並べないとダメだったんです！

a:link { }
a:visited { }
a:hover { }
a:active { }

正しい順番の場合

.L01 a:link { color:red; text-decoration:underline; }
.L01 a:visited { color:blue; text-decoration:none; }
.L01 a:hover { color:green; text-decoration:none; }
.L01 a:active { color:black; text-decoration:none; }

【正しい結果】

L01をクラス指定されたリンク

　リンク上にカーソルを持って行くと、指定した色やアンダーラインが指定した通りに表示される。

間違った順番の場合

.L02 a:active { color:black; text-decoration:none; }
.L02 a:hover { color:green; text-decoration:none; }
.L02 a:visited { color:blue; text-decoration:none; }
.L02 a:link { color:red; text-decoration:underline; }