首先我們需要知道css偽類是用來(lái)添加一些選擇器的特殊效果雨膨。
- link表示的是正常情況下鏈接的樣式。
- visit代表鏈接訪問(wèn)后的樣式读串，則鏈接一旦被訪問(wèn)聊记，則之后它的樣式就會(huì)是你所設(shè)置的visited樣式撒妈。
- hover在鼠標(biāo)移到鏈接上時(shí)添加的特殊樣式。
- focus 在一個(gè)元素成為焦點(diǎn)時(shí)生效甥雕，用戶可以通過(guò)鍵盤或鼠標(biāo)激活焦點(diǎn)踩身。
- active在一個(gè)元素處于激活狀態(tài)（鼠標(biāo)在元素上按下還沒(méi)有松開）時(shí)所使用的樣式胀茵。
- hover理論上任何元素都可以使用的社露，focus多是針對(duì)表單的，如input等 琼娘。而active多用于鏈接峭弟。
順序
這四種偽類存在著一定的順序，成為L(zhǎng)VHA順序脱拼。各個(gè)樣式之間的順序很有講究瞒瘸，一旦出現(xiàn)排列錯(cuò)誤就很有可能形成覆蓋，導(dǎo)致其中某個(gè)樣式無(wú)法顯示熄浓。
比如情臭，link與visit的位置是隨意的。但hover赌蔑，focus俯在，active則必須按照f(shuō)ocus--hover--active這個(gè)順序。
link與visit的位置是任一的是因?yàn)閘ink指的是元素被訪問(wèn)前的樣式娃惯，而visit這指的是訪問(wèn)后的跷乐。而其他三個(gè)則與css的就近原則有關(guān)。
比如
a:focus{
background-color:red;
}
a:hover {
background-color:yellow;
}
a:active{
background-color:black;
}
<body>
<a href="#">zyy</a>
</body>
在這段代碼中當(dāng)我們時(shí)趾浅，我們把鼠標(biāo)放上去是愕提，會(huì)顯示黃色
hover
點(diǎn)擊時(shí)顯示的是黑色
active
松開后是黃色移開鼠標(biāo)是紅色。
focus
然后我試著將這三個(gè)css的順序變換得到了下面的結(jié)果
（h：hover a：active f：focus）
| 懸停 | 點(diǎn)擊 | 松開 | 焦點(diǎn) | |
|---|---|---|---|---|
| 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的位置不會(huì)影響懸停時(shí)樣式的顏色皿哨，但它會(huì)間接影響其他兩種樣式的效果浅侨。
- active必須要在focus，hover的后面证膨，否則就會(huì)被覆蓋如输。
- focus的位置很關(guān)鍵它與其他兩個(gè)的位置會(huì)影響一系列樣式的效果。
引用
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
