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