でんきかいでんのブログ

電子工作、ミシン、ペンタブレット、で使える、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。こだわり系テンキーレス有線キーボードの使用感レビューなど。

正当なCSSです! クリエイティブ・コモンズ・ライセンス表示

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; }

【正しい結果】

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



間違った順番の場合

.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; }

【間違った結果】

 リンク上にカーソルを持って行っても、指定した色が表示されない。
 テキストデコレーションも効いていない。



CSS内の記述順は重要だった

 CSS内での、a:link の記述の順番はとても重要です。
 正直今までまったく気にしていませんでした。
 CSSを見直して、ちゃんと並べましょう。


関連記事

« NEW  | HOME |  OLD »

コメント

コメントの投稿


「コメント非表示」管理人しか閲覧できないコメントにする。

 | HOME | 

TOPへ