2015.02.11 [水]
a:link { の順序
順番は重要だった
今まで全然気にしてなかったんですが、実は並べる順番が重要でした。CSS内で、ちゃんとこう並べないとダメだったんです！
a:link { }
a:visited { }
a:hover { }
a:active { }
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 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; }
.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を見直して、ちゃんと並べましょう。
- 関連記事
-
-
特定の行へジャンプするためのHTML
2015/01/25
-
インライン要素ブロック要素
2015/02/04
-
a:link { の順序
2015/02/11
-
word-break,word-wrap,white-space
2015/02/13
-
CSS text-align:justify;
2015/04/04
-
コメントの投稿