关于超链接的四个伪类的一个问题(顺序问题)
在使用超鏈接的偽類的時候,要使用如下順序,否則其中的某些效果將會沒有效果
【注釋:link和visited的順序無所謂】
a:link ? ? ? ? ? ? ??設置a對象在未被訪問前的樣式表屬性。
a:visited ? ?設置a對象在其鏈接地址已被訪問過時的樣式表屬性。?
a:hover? ??設置對象在其鼠標懸停時的樣式表屬性。?
a:active ? ?設置對象在被用戶激活(在鼠標點擊與釋放之間發生的事件)時的樣式表屬性。?
原因是:瀏覽器解釋CSS時遵循的“就近原則”。
? 當幾種情況沖突的時候,哪個在最下面哪個優先級就是最高的。
?
關于這四個偽類的發生時間及相互沖突的情況如下(自己悟出來的)
① link 和 visited實際上是同一個事件,但是選擇其中一個的效果,這兩個的順序彼此不影響
?
② hover 范圍中等。它發生時【link或者visited中的一個】必在發生
③ active 是范圍最小的,它發生時hover和【link或者visited中的一個】必在發生
為保證不沖突,范圍最小的寫在最下面,以保證能夠優先被瀏覽器解釋。
關于①的一個例子:
?
一個例子: a:visited{color: green}
?
?a:hover{color: blue}
?
? ? ? ? a:link{color: red}
?
這樣的順序即使鏈接是被訪問過的,hover也不會有效果,因為link和visited是同一個事件,
?
這時候hover的效果被link事件(實際是visited的效果綠色)覆蓋掉
?
?
總結
以上是生活随笔為你收集整理的关于超链接的四个伪类的一个问题(顺序问题)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: IO之流程与buffer概览
- 下一篇: Zabbix字符集乱码及Centos7补