鏈接的四個偽類順序


  <a>元素的作用是可以創建一個鏈接,鏈接對應4個狀態:未訪問,已訪問,鼠標懸停,鼠標點擊瞬間。

  為了給鏈接的4個狀態應用樣式,引入偽類的概念。

  什么是偽類呢?簡單點說,就是你沒定義這個類,但它確實作為一個類來使用。(這些類確實存在,瀏覽器在后台會向這些類增加和刪除元素)

  我在看《CSS設計指南》時,它說到四個偽類的書寫順序一定要正確,否則瀏覽器可能不會顯示預期的結果。

  也即這樣寫:

1 a:link{color:black;}
2 a:visited{color:gray;}
3 a:hover{color:red;}
4 a:active{color:blue;}

 

   為什么必須得按順序呢?

  這個問題可以這樣來解答。

  首先注意關鍵的兩點:1.這4個偽類特指度相同。2.一個鏈接可能同時處於多種狀態,即同時屬於多個偽類。

  好,現在來詳細剖析。

  未點擊鏈接前,link偽類長期處於激活狀態,鼠標懸停(或點擊)時,<a>鏈接同時處於link和hover(或active)狀態,由於它們特指度相同,在同時激活的情況下,后出現的偽類樣式會覆蓋前面的偽類樣式,故link狀態必須寫在hover(或active)之前。

  再討論hover和active的順序,若把hover放在active后面,當點擊鏈接一瞬,實際你在激活active狀態的同時觸發了hover偽類,hover在后面覆蓋了active的顏色,所以無法看到active的顏色。故hover在active之前

  其次,若把visited放在hover后面,那已訪問過的鏈接一直觸發着visited偽類,會覆蓋hover樣式。

  最后,其實link、visited兩個偽類之間順序無所謂。(因為它倆不可能同時觸發,即又未訪問同時又已訪問。)

  記這順序有個小招數,“LoVe? HA!”。

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM