預(yù)期效果:未訪問(wèn)鏈接顏色為藍(lán)色,活動(dòng)鏈接為綠色, 已訪問(wèn)鏈接為紅色,活動(dòng)鏈接為綠色,已訪問(wèn)鏈接為紅色
第一種情況:我定義順序是a:visited、a:hover/a:link,這時(shí)將鼠標(biāo)放到未訪問(wèn)過(guò)的藍(lán)色鏈接上,他并不變成綠色,只有放在訪問(wèn)過(guò)的紅色鏈接上,鏈接才會(huì)變綠
第二種情況:我把css定義順序調(diào)整為:a:link、a:visited、a:hover這時(shí),無(wú)論鼠標(biāo)是否經(jīng)過(guò)的鏈接有沒(méi)有訪問(wèn)過(guò),他都會(huì)變成綠色
這是因?yàn)椋粋€(gè)鼠標(biāo)經(jīng)過(guò)未訪問(wèn)鏈接同時(shí)擁有a:link、a:hover兩種屬性,在第一種情況下,a:link離它最近,所以?xún)?yōu)先,所以它優(yōu)先滿(mǎn)足a:link,而放棄a:hover的重復(fù)定義
第二種情況中,無(wú)論鏈接有沒(méi)有被訪問(wèn)過(guò),他首先要檢查是否符合a:hover標(biāo)準(zhǔn),及是否有鼠標(biāo)經(jīng)過(guò)他,滿(mǎn)足,則變成綠色,不滿(mǎn)足,則繼續(xù)向上查找,一直到滿(mǎn)足條件的定義為止
總結(jié):在css中,如果對(duì)于相同元素有針對(duì)不同條件的定義,應(yīng)該將最一般的條件放在最上面,并依次向下,保證最下面的是最特殊的條件
這樣,瀏覽器在顯示元素時(shí),才會(huì)從特殊到一般、逐級(jí)向上驗(yàn)證條件,才會(huì)使你的每一個(gè)CSS語(yǔ)句都起到效果。
當(dāng)然,如果故意打亂順序,也會(huì)造成一些特殊的效果。比如,可以為鏈接制造出下劃線顏色與文字顏色的差異。
近日突然發(fā)現(xiàn),原來(lái)這個(gè)CSS問(wèn)題早已有高人提出啦。還是個(gè)老外呢。他給總結(jié)了一個(gè)便于記憶的“愛(ài)恨原則”(LoVe/HAte),即四種偽類(lèi)的首字母:LVHA。
再重復(fù)一遍正確的順序:a:link、a:visited、a:hover、a:active .
最后經(jīng)驗(yàn)補(bǔ)充:
1.鼠標(biāo)經(jīng)過(guò)的“未訪問(wèn)鏈接”同時(shí)擁有a:link、a:hover兩種屬性,后面的屬性會(huì)覆蓋前面的屬性定義;
2.鼠標(biāo)經(jīng)過(guò)的“已訪問(wèn)鏈接”同時(shí)擁有a:visited、a:hover兩種屬性,后面的屬性會(huì)覆蓋前面的屬性定義;
所以說(shuō),a:hover定義一定要放在a:link、a:visited的后面,,,