link:連接平常的狀態(tài)
visited:連接被訪問過之后
hover:鼠標放到連接上的時候
active:連接被按下的時候
詳細的:
:hover版本:CSS1/CSS2 兼容性:IE4+ NS4+
語法:
Selector : hover { sRules }
說明:
設置對象在其鼠標懸停時的樣式表屬性。
在CSS1中此偽類僅可用于a對象。且對于無href屬性(特性)的a對象,此偽類不發(fā)生作用。在CSS2中此偽類可以應用于任何對象。
目前IE5.5+僅支持CSS1中的:hover。
:active版本:CSS1/CSS2 兼容性:IE4+
語法:
Selector : active { sRules }
說明:
設置對象在被用戶激活(在鼠標點擊與釋放之間發(fā)生的事件)時的樣式表屬性。
在CSS1中此偽類僅可用于a對象。且對于無href屬性(特性)的a對象,此偽類不發(fā)生作用。在CSS2中此偽類可以應用于任何對象。并且:active狀態(tài)可以和:link以及:visited狀態(tài)同時發(fā)生。
目前IE5.5+僅支持CSS1中的:active。
:link版本:CSS1 兼容性:IE4+ NS4+
語法:
Selector : link { sRules }
說明:
設置a對象在未被訪問前的樣式表屬性。
IE3將:link偽類的樣式表屬性作用于visited偽類。
默認值由瀏覽器決定。
對于無href屬性(特性)的a對象,此偽類不發(fā)生作用。
:visited版本:CSS1 兼容性:IE4+ NS4+
語法:
Selector : visited { sRules }
說明:
設置a對象在其鏈接地址已被訪問過時的樣式表屬性。
IE3將:link偽類的樣式表屬性作用于visited偽類。
默認值由瀏覽器決定。定義網(wǎng)頁過期時間或用戶清空歷史記錄將影響此偽類的作用。
對于無href屬性(特性)的a對象,此偽類不發(fā)生作用。
2:hover和a:visited書寫順序的重要性
今天在用a:hover屬性的時候發(fā)現(xiàn)一個奇怪的問題,同一個頁面里面有些鏈接的a:hover效果不能正常表現(xiàn)出來。鏈接的代碼是一樣,沒有使用其它樣式固定,搞的我莫名其妙。還以為是某個標簽沒有關(guān)閉,但是頁面比較長,檢查起來又嫌累,但是想來想去找不到其它原因,索性把瀏覽器一關(guān),做別的事情去了。
重新打開這個頁面的時候,突然發(fā)現(xiàn)那個鏈接的a:hover效果又出來了。我想了一下,點了那個鏈接,然后回過頭再點,果然又沒了。連忙檢查css文檔,發(fā)現(xiàn)a:hover屬性寫在了visited之前,改寫到之后,重試,ok!
以前看書的時候注意到css中關(guān)于鏈接表現(xiàn)的書寫有提示說各屬性順序不能顛倒,一直沒有注意,寫的時候通常都很隨意。現(xiàn)在看來不能這個順序還是很重要的。
css中關(guān)于超鏈接的四個屬性一般正常順序為: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時遵循的“就近原則”。
舉例來說:
我想讓未訪問鏈接顏色為藍色,活動鏈接為綠色,已訪問鏈接為紅色:
這是因為,一個鼠標經(jīng)過的未訪問鏈接同時擁有a:link、a:hover兩種屬性,在第一種情況下,a:link離它最近,所以它優(yōu)先滿足a:link,而放棄a:hover的重復定義。
在第二種情況,無論鏈接有沒有被訪問過,它首先要檢查是否符合a:hover的標準(即是否有鼠標經(jīng)過它),滿足,則變成綠色,不滿足,則繼續(xù)向上查找,一直找到滿足條件的定義為止。
一句話:在CSS中,如果對于相同元素有針對不同條件的定義,宜將最一般的條件放在最上面,并依次向下,保證最下面的是最特殊的條件。
這樣,瀏覽器在顯示元素時,才會從特殊到一般、逐級向上驗證條件,才會使你的每一個CSS語句都起到效果。
當然,如果故意打亂順序,也會造成一些特殊的效果。比如,可以為鏈接制造出下劃線顏色與文字顏色的差異。
近日突然發(fā)現(xiàn),原來這個CSS問題早已有高人提出啦。還是個老外呢。他給總結(jié)了一個便于記憶的“愛恨原則”(LoVe/HAte),即四種偽類的首字母:LVHA。
再重復一遍正確的順序:a:link、a:visited、 a:hover、a:active .
最后經(jīng)驗補充:
1.鼠標經(jīng)過的“未訪問鏈接”同時擁有a:link、a:hover兩種屬性,后面的屬性會覆蓋前面的屬性定義;
2.鼠標經(jīng)過的“已訪問鏈接”同時擁有a:visited、a:hover兩種屬性,后面的屬性會覆蓋前面的屬性定義;
所以說,a:hover定義一定要放在a:link、a:visited的后面,,,
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com