作者 饑人谷_張穎瑩 關注2015.12.05 16:46 字數 605 閱讀 342評論 3喜歡 2首先我們需要知道css偽類是用來添加一些選擇器的特殊效果。
link表示的是正常情況下鏈接的樣式。visit代表鏈接訪問后的樣式，則鏈接一旦被訪問，則之后它的樣式就會是你所設置的visited樣式。hover在鼠標移到鏈接上時添加的特殊樣式。focus 在一個元素成為焦點時生效，用戶可以通過鍵盤或鼠標激活焦點。active在一個元素處于激活狀態（鼠標在元素上按下還沒有松開）時所使用的樣式。hover理論上任何元素都可以使用的，focus多是針對表單的，如input等 。而active多用于鏈接。這四種偽類存在著一定的順序，成為LVHA順序。各個樣式之間的順序很有講究，一旦出現排列錯誤就很有可能形成覆蓋，導致其中某個樣式無法顯示。比如，link與visit的位置是隨意的。但hover，focus，active則必須按照focus--hover--active這個順序。link與visit的位置是任一的是因為link指的是元素被訪問前的樣式，而visit這指的是訪問后的。而其他三個則與css的就近原則有關。比如
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的順序變換得到了下面的結果（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 |
新聞熱點
疑難解答
