CSS試験点の一つ、ラベル、偽類

ブロガーブログ:Stillwaterのブログ
一、ラベルでよく使われる偽クラスの概要

a:link{color:blue}                                                     
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}

linkリンクがあり、そのリンクがアクセスされていない場合、この擬似クラスはアクティブになります.

vistiedあるリンクはすでにアクセスされていません.この擬似クラスはアクティブです.

hoverマウスがリンクにぶら下がっている間、この擬似クラスはマウスがリンクを移動するまでアクティブになります.

activeマウスでリンクをクリックすると、この擬似クラスがアクティブになります.マウスをクリックしても離さず、この擬似クラスはマウスを離すまでアクティブになります.

二、ラベルの偽類の書く順序の詳しい解
なぜ偽類の書く順序を考えるのですか?
第一に、CSS(Cascading Style Sheets)は全称で積層スタイルシートに翻訳される.複数のルールで要素の同じ属性が定義される場合がありますが、どうすればいいですか?CSSはスタイル宣言を積層の原則で考慮し,競合するルールの中でどのルールが機能するべきかを判断する.まず、あなたが書いたスタイルがブラウザのデフォルトのスタイルと衝突した場合は、あなたが書いたスタイルに準拠します.これに基づいてCSSは,特殊性(specificity),順序(order),重要性(importance)を積層の原則で考慮し,互いに衝突するルールの中でどのルールが機能するべきかを判断する.これらの用語の影響を受けないで、CSSがどのようなスタイルを適用するか、いつこれらのスタイルを適用するかを決定する方法を理解することができます.[1]第2に、タグの4つの擬似クラスの特殊性は同じであるため、あるリンクがある状態で複数の擬似クラスが同時にアクティブ化されると、擬似クラスの書き込み順序が重要な役割を果たし、最終的な表示効果に影響を及ぼす.これが私たちが偽類の書く順序を考慮しなければならない理由です.
どの擬似クラスが同時にアクティブになり、表示効果に影響しますか?
第一に、:linkと:visitedの2つの偽クラスの間の順序はどうでもいい.両方が同時にトリガーされるわけではありません.すなわち、アクセスされていない間にアクセスしたことがあります.ここで、:linkは、ある要素にリンクが存在する限りアクティブになると理解されているが、これは間違っている.リンクがアクセスされると、:linkはアクティブになりません.実験をしましょう.

a:visited{color:red}                                                 
a:hover{color:green}
a:active{color:purple}
a:link{color:blue}                                                      

私たちは:linkを最後に置いて、最初はリンクにアクセスしていません.私のマウスが浮かんでもクリックしても、色は変わりません.青です.初めてマウスをクリックして離すと、色が赤くなります.さらに浮かぶと緑になり、クリックすると紫色になり、さらに離すと赤に戻ります.青は二度と現れない.この時点でリンクは依然として存在しますが、すでにアクセスされているだけなので、:linkの擬似クラスはアクティブになりません.第二に、ユーザの習慣の観点から、リンクアクセスまたは未アクセスにかかわらず、マウスがリンクに浮かぶと色の変化が生じることが望ましく、リンクアクセスまたは未アクセスにかかわらず、発生した色の変化は同じであるべきである.:hoverと:linkの後ろに置くべきです

a:link{color:blue}                                                 
a:visited{color:red}

a:hover{color:green}

第三に、ユーザの習慣の観点から、リンクアクセスまたは未アクセスにかかわらず、マウスがリンクをクリックしたときに色の変化を生じることを望んでおり、リンクアクセスまたは未アクセスにかかわらず、発生した色の変化は同じであるべきである.:visitedと:activeの後ろに置くべきです

a:link{color:blue}                                                
a:visited{color:red}

a:active{color:purple}

第四に、順番に、常にリンクにマウスを浮かべてからクリック操作を行うことができ、予想される効果は、浮かぶと色が変化し、マウスをクリックすると別の色が変化することである.hoverをactiveの後ろに置くと、リンクをクリックすると一瞬、実際にはactive状態をアクティブにしながらhover偽クラスをトリガーし、hoverは後ろでactiveの色を覆っているので、activeの色は見えません.だからhoverはactiveの前にいます.[2]

a:link{color:blue}                                                   
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}

順番を覚えるコツ「LoVe,HA」

HTML 5とCSS 3基礎教程(第8版)第7章第4節,[美]Elizabeth Castro Bruce Hyslop著,以文訳を望む.↩

[:linkリンクの4つの擬似クラス順序]から参照http://www.cnblogs.com/xiayi/p/5350423.html. ↩