:link,:visited,:focus,:hover,:active詳解

CSS 又名 層疊樣式表,所謂層疊,就是後面的樣式會覆蓋前面的樣式,所以在樣式表中,各樣式排列的順序很有講究。

:link 與 :visited 在樣式文件中的順序可以隨便放置。

focushoveractive這幾個,如果你設置的順序不同,會直接影響樣式的顯示效果,下面會詳細解釋。

:focus -> :hover -> :active

 

有些人可能會困惑,爲什麼必須要按這樣的順序,而不能打亂呢? 其實他們每一個選擇器都代表一個含義。

:link代表爲訪問鏈接的樣式,所以只要你是超鏈接,且未被訪問過,則鏈接都會按照你設定的樣式顯示,所以它的位置順序無所謂。

:visited代表鏈接訪問後的樣式,則鏈接一旦被訪問,則之後它的樣式就會是你所設置的visited樣式

重點是下面這幾個:

:focus 代表的是獲取焦點時的樣式,有人說啥是獲取焦點時的樣式,這個我們可以通過tab鍵來查看,一旦鏈接獲取了焦點,則它的樣式就是你設置的focus樣式。

:hover 代表的是你光標經過某一元素時的樣式,如果將此樣式放在:focus之後,則當鏈接獲取焦點時,顯示:focus樣式,當光標經過此鏈接時,會顯示hover的樣式,因爲hover排在後,會覆蓋focus樣式。

如果:hover排在前,:focus排在後,則當光標獲得焦點時顯示:focus的樣式,但當光標經過鏈接時,樣式並未顯示:hover的樣式,而是繼續是:focus的樣式,因爲應用的focus樣式在hover之後,覆蓋了前面的樣式。

測試代碼如下:

a:focus{

color:#AA80FE;

text-decoration:underline;

}

a:hover{

color:#FF0000;

text-decoration:underline;

}

a:hover{

color:#FF0000;

text-decoration:underline;

}

a:focus{

color:#AA80FE;

text-decoration:underline;

}

:active 代表元素被激活時的樣式,也就是元素被按下時的樣式,如果:active選擇器與 :focus , :hover 調換位置,則顯示的效果也會不同,因爲排在後面的樣式,會覆蓋前面的樣式。

測試代碼如下:

a:hover{

color:#FF0000;

text-decoration:underline;

}

a:active{

color:#FFCC00;

}

 

a:active{

color:#FFCC00;

}

a:hover{

color:#FF0000;

text-decoration:underline;

}

你可能會問,css是層疊樣式表,那是不是就意味着寫在後面的樣式一定會覆蓋前面的樣式呢?

大家可以看另一篇教程:CSS中選擇器優先級順序實戰講解

歡迎大家加入互聯網技術交流羣:62329335

個人申明:所分享博文,絕對原創,併力爭每一個知識點都通過實戰演示來進行驗證。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章