首先我們需要知道css偽類是用來添加一些選擇器的特殊效果。
- link表示的是正常情況下鏈接的樣式。
- visit代表鏈接訪問后的樣式，則鏈接一旦被訪問，則之后它的樣式就會是你所設置的visited樣式。
- hover在鼠標移到鏈接上時添加的特殊樣式。
- focus 在一個元素成為焦點時生效，用戶可以通過鍵盤或鼠標激活焦點。
- active在一個元素處于激活狀態(tài)（鼠標在元素上按下還沒有松開）時所使用的樣式。
- hover理論上任何元素都可以使用的，focus多是針對表單的，如input等 。而active多用于鏈接。
順序
這四種偽類存在著一定的順序，成為LVHA順序。各個樣式之間的順序很有講究，一旦出現(xiàn)排列錯誤就很有可能形成覆蓋，導致其中某個樣式無法顯示。
比如，link與visit的位置是隨意的。但hover，focus，active則必須按照focus--hover--active這個順序。
link與visit的位置是任一的是因為link指的是元素被訪問前的樣式，而visit這指的是訪問后的。而其他三個則與css的就近原則有關(guān)。
比如
a:focus{
background-color:red;
}
a:hover {
background-color:yellow;
}
a:active{
background-color:black;
}
<body>
<a href="#">zyy</a>
</body>
在這段代碼中當我們時，我們把鼠標放上去是，會顯示黃色
hover
點擊時顯示的是黑色
active
松開后是黃色移開鼠標是紅色。
focus
然后我試著將這三個css的順序變換得到了下面的結(jié)果
（h：hover a：active f：focus）
| 懸停 | 點擊 | 松開 | 焦點 | |
|---|---|---|---|---|
| fha | yellow | black | yellow | red |
| fah | yellow | yellow | yellow | red |
| afh | yellow | yellow | yellow | red |
| ahf | yellow | red | red | red |
| haf | yellow | red | red | red |
| hfa | yellow | black | red | red |
分析
- 由表格可以看出hover的位置不會影響懸停時樣式的顏色，但它會間接影響其他兩種樣式的效果。
- active必須要在focus，hover的后面，否則就會被覆蓋。
- focus的位置很關(guān)鍵它與其他兩個的位置會影響一系列樣式的效果。
引用
http://www.bubuko.com/infodetail-767726.html
http://hovertree.com/hvtart/bjae/v8e7w4u1.htm
http://www.w3school.com.cn/cssref/selector_hover.asp
http://www.bkjia.com/webzh/873587.html
