超鏈接a標籤中的僞類區別及用法

首先 “超鏈接” 就是我們 html 中的 a 標籤,這個應該大家都沒問題。

  1. 再接着,"僞類":什麼是僞類?
  2. css 對於僞類的解釋是用於向某些選擇器添加特殊的效果。
  3. 簡單點說,就是你沒定義這個類,但它確實作爲一個類來使用。
  4. 再簡單點就是你可以利用僞類爲我們的元素添加各種不同的效果。
  5. 比如:
  6. a:hover { }
  7. 這段代碼就是給 a 這個標籤選擇器添加了一個效果,這個效果在鼠標懸停於 a 標籤上方時被觸發。
  8. 並且,僞類還有權重(特殊性),《css權威指南》中指出,其特殊性爲:0,0,1,0
  9. 也就是說僞類的權重和class的權重是一樣的。這一點一定要注意,這一點一定要注意 一定要注意;敲黑板劃重點!
  10. 再回到問題,css1 在給 a 定義僞類的時候,一共有四個僞類,分別是:link,visited,hover,active。並且這四個僞類一直延續到現在
  11. 其各自代表不同的意思:
  12. a:link 表示未被訪問的鏈接 (在頁面上寫了,還沒有訪問過)
  13. a:visited 表示已經被訪問過後的鏈接 (訪問過了,注:判斷是否訪問過,是以瀏覽器的瀏覽記錄爲依據)
  14. a:hover 表示鼠標指針位於其上的鏈接
  15. a:active 表示活動鏈接 (當鼠標點下時的鏈接)
  16. 用中文表達就是:你在頁面上寫了一個鏈接,你打開這個頁面的時候,這個鏈接處於 link 狀態
  17. 當你要去點擊它的時候,首先會把鼠標移到連接上去,這時候是 hover 狀態
  18. 當你把鼠標點下去,還沒擡起來的那一瞬間是 active 狀態
  19. 完事之後就是 visited 狀態了
  20. 看到這大家應該就要明白題中的 L,V,H,A 四個字母分別代表的就是 a 標籤的四個僞類了。
  21. 考題第二點:順序?
  22. a 標籤的四個僞類書寫順序很重要麼?當然重要!!!
  23. CSS設計指南》說到四個僞類的書寫順序一定要正確,否則瀏覽器可能不會顯示預期的結果。
  24. 首先來看前面兩個僞類:link visited 分別代表未訪問的鏈接和已經訪問的鏈接,那麼一個鏈接不可能同時存在這兩個狀態,所以實際上這兩個僞類的順序是可以隨意一點的
  25. 再來看 visited hover
  26. 假設 hover 寫在 visited 的前面 並且這個鏈接已經被訪問過了
  27. a:visiteda:hover 這兩個選擇器在權重上是一樣的。那麼根據 css 規則,權重一樣的兩個選擇器選中同一個元素的時候,後者覆蓋前者,所以 visited 一定要在前面。那麼以此類推,link hover 之間的順序也就毋庸置疑了
  28. 再來看 hover active
  29. 試想當我們要點擊一個元素的時候,是不是一定會移動到這個元素身上?
  30. 也就是說想要觸發 active 必定會觸發 hover 僞類,還是權重一樣,後者覆蓋前者
  31. 那麼四個元素的順序就出來了 前面 link visited 後面 hover active
  32. 假設 hover 寫在 visited 的前面 並且這個鏈接已經被訪問過了,那麼這時候鼠標移動到 a 標籤身上,觸發 hover,其顏色變成粉色(假設)。但是不要忘了,後面還有一個 visited 並且 a:visiteda:hover 這兩個選擇器在權重上是一樣的。那麼根據 css 規則,權重一樣的兩個選擇器選中同一個元素的時候,書寫在後面的選擇器會覆蓋前面的效果。所以這時候 hover 的樣式會被 visited 覆蓋。其導致的結果就是:當一個鏈接被訪問過後,鼠標移動到這個鏈接身上將不會有任何的效果(表現爲 hover 失效了)。那麼以此類推,link hover 之間的順序也就毋庸置疑了
  33. 再來看 hover active
  34. 試想當我們要點擊一個元素的時候,是不是一定會移動到這個元素身上?也就是說必定會觸發 hover 僞類
  35. 這時候如果 active 僞類寫在 hover 僞類前面 在點擊這個元素的時候,樣式發生改變了,但是後面的 hover 權重和它一樣高,又被覆蓋了,所以這兩個僞類之間的順序也就很明顯了 先寫 hover 後寫active
  36. 那麼四個元素的順序就出來了 前面 link visited 後面 hover active
  37. 最後再多嘴一句,既然 link visited 的順序無所謂,那爲什麼一般都要把 link 放在前面呢?
  38. 一個鏈接,頁面一上來其狀態一定是未訪問。從視覺順序來排,link 在前面。)
  39. 教大家一個小技巧:Lv!(路易威登,一個世界知名奢侈品品牌,女孩對其防禦力爲負無窮大!俗稱泡妞利器)
  40. lv! haha...(如果你送女朋友一個lv,那她一定開心得哈哈大笑)


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