a:link,a:visited,a:hover,a:active,visitedhover
1:解釋
link:串連平常的狀態
visited:串連被訪問過之後
hover:滑鼠放到串連上的時候
active:串連被按下的時候
詳細的:
:hover版本:CSS1/CSS2 相容性:IE4+ NS4+
文法:
Selector : hover { sRules }
說明:
設定對象在其滑鼠移至上方時的樣式表屬性。
在CSS1中此偽類僅可用於a對象。且對於無href屬性(特性)的a對象,此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。
目前IE5.5+僅支援CSS1中的:hover。
:active版本:CSS1/CSS2 相容性:IE4+
文法:
Selector : active { sRules }
說明:
設定對象在被使用者啟用(在滑鼠點擊與釋放之間發生的事件)時的樣式表屬性。
在CSS1中此偽類僅可用於a對象。且對於無href屬性(特性)的a對象,此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。並且:active狀態可以和:link以及:visited狀態同時發生。
目前IE5.5+僅支援CSS1中的:active。
:link版本:CSS1 相容性:IE4+ NS4+
文法:
Selector : link { sRules }
說明:
設定a對象在未被訪問前的樣式表屬性。
IE3將:link偽類的樣式表屬性作用於visited偽類。
預設值由瀏覽器決定。
對於無href屬性(特性)的a對象,此偽類不發生作用。
:visited版本:CSS1 相容性:IE4+ NS4+
文法:
Selector : visited { sRules }
說明:
設定a對象在其連結地址已被訪問過時的樣式表屬性。
IE3將:link偽類的樣式表屬性作用於visited偽類。
預設值由瀏覽器決定。定義網頁到期時間或使用者清空記錄將影響此偽類的作用。
對於無href屬性(特性)的a對象,此偽類不發生作用。
2:hover和a:visited書寫順序的重要性
今天在用a:hover屬性的時候發現一個奇怪的問題,同一個頁面裡面有些連結的a:hover效果不能正常表現出來。連結的代碼是一樣,沒有使用其它樣式固定,搞的我莫名其妙。還以為是某個標籤沒有關閉,但是頁面比較長,檢查起來又嫌累,但是想來想去找不到其它原因,索性把瀏覽器一關,做別的事情去了。
重新開啟這個頁面的時候,突然發現那個連結的a:hover效果又出來了。我想了一下,點了那個連結,然後回過頭再點,果然又沒了。連忙檢查css文檔,發現a:hover屬性寫在了visited之前,改寫到之後,重試,ok!
以前看書的時候注意到css中關於連結資料表現的書寫有提示說各屬性順序不能顛倒,一直沒有注意,寫的時候通常都很隨意。現在看來不能這個順序還是很重要的。
css中關於超連結的四個屬性一般正常順序為:link,visited,hover,active,即
a:link
a:visited
a:hover
a:active
A:link { color: #000000; TEXT-DECORATION: none}A:visited { COLOR: #000000; TEXT-DECORATION: none}A:hover { COLOR: #ff7f24; text-decoration: underline;}A:active { COLOR: #ff7f24; text-decoration: underline;}引自靈眸●第一爐沉香部落格 a :link、a:hover、a:visited這幾個元素,定義CSS時候的
順序不同,也會直接導致連結顯示的效果不同。
我想,原因就在於瀏覽器解釋CSS時遵循的“就近原則”。
舉例來說:
我想讓未訪問連結顏色為藍色,活動連結為綠色,已訪問連結為紅色:
- 第一種情況:我定義的順序是a:visited、a:hover、a:link,這時會發現:把滑鼠放到未訪問過的藍色連結上時,它並不變成綠色,只有放在已訪問的紅色連結上,連結才會變綠。
- 第二種情況:我把CSS定義順序調整為:a:link、a:visited、a:hover,這時,無論你滑鼠經過的連結有沒有被訪問過,它都會變成綠色啦。
這是因為,一個滑鼠經過的未訪問連結同時擁有a:link、a:hover兩種屬性,在第一種情況下,a:link離它最近,所以它優先滿足a:link,而放棄a:hover的重複定義。
在第二種情況,無論連結有沒有被訪問過,它首先要檢查是否符合a:hover的標準(即是否有滑鼠經過它),滿足,則變成綠色,不滿足,則繼續向上尋找,一直找到滿足條件的定義為止。
一句話:在CSS中,如果對於相同元素有針對不同條件的定義,宜將最一般的條件放在最上面,並依次向下,保證最下面的是最特殊的條件。
這樣,瀏覽器在顯示元素時,才會從特殊到一般、逐級向上驗證條件,才會使你的每一個CSS語句都起到效果。
當然,如果故意打亂順序,也會造成一些特殊的效果。比如,可以為連結製造出底線顏色與文字顏色的差異。
近日突然發現,原來這個CSS問題早已有高人提出啦。還是個老外呢。他給總結了一個便於記憶的“愛恨原則”(LoVe/HAte),即四種偽類的首字母:LVHA。
再重複一遍正確的順序:a:link、a:visited、
a:hover、a:active .
最後經驗補充:
1.滑鼠經過的“未訪問連結”同時擁有a:link、a:hover兩種屬性,後面的屬性會覆蓋前面的屬性定義;
2.滑鼠經過的“已訪問連結”同時擁有a:visited、a:hover兩種屬性,後面的屬性會覆蓋前面的屬性定義;
所以說,a:hover定義一定要放在a:link、a:visited的後面,,,