a:link洛勉、a:visited页屠、a:hover檩互、a:avtive的正確使用順序


1.<a>標(biāo)簽
<a>標(biāo)簽的功能:
<a>標(biāo)簽定義超鏈接特幔,用于從一張頁面鏈接到另一張頁面。
<a>元素最重要的屬性是href屬性闸昨,它指示鏈接的目標(biāo)蚯斯。
所有瀏覽器中,鏈接的默認(rèn)外觀是:

  • 未被訪問的連接帶有下劃線而且是藍(lán)色的
  • 已被訪問的鏈接帶有下劃線而且是紫色的
  • 活動鏈接帶有下劃線而且是紅色的

<a>標(biāo)簽還有一個很重要的屬性:target饵较,它用于規(guī)定在何處打開鏈接文檔拍嵌,取值有:_blank;_parent;_self;_top。這個我們后面也會總結(jié)一下循诉。
2. a鏈接的四種狀態(tài)
偽類是css用于向某些選擇器添加的特殊效果横辆。
a標(biāo)簽中有四個:link、visited茄猫、hover狈蚤、active
(1)link
說明:設(shè)置a對象在其鏈接地址未被訪問前的樣式屬性。
(2)visited
說明:設(shè)置a對象在其鏈接地址已被訪問過時的樣式屬性划纽。
(3)hover
說明:設(shè)置對象在其鼠標(biāo)懸停時的樣式表屬性脆侮。
(4)說明:設(shè)置對象在被用戶激活(在鼠標(biāo)點擊與釋放之間發(fā)生的事件)時的樣式表屬性。
定義css時候的順序不同勇劣,也會直接導(dǎo)致鏈接顯示的效果不同他嚷。原因可能在于瀏覽器解釋css時遵循的“就近原則”。正確順序:a:link芭毙、a:visited、a:hover卸耘、a:active
解釋:

  • link:鏈接平常的狀態(tài)
  • visited:鏈接被訪問過后
  • hover:鼠標(biāo)放到連接上的時候
  • active:鏈接被按下的時候
    舉例來說:
    我相仿未被訪問鏈接為藍(lán)色退敦, 活動鏈接為綠色,已訪問鏈接為紅色:

第一種情況:我定義的順序是a:visited蚣抗、a:hover侈百、a:link瓮下,這時會發(fā)現(xiàn):把鼠標(biāo)放到未訪問過的藍(lán)色鏈接上時,他并不變成綠色钝域,只有放在已訪問的紅色鏈接上讽坏,鏈接才會變綠色;
第二種情況:我把css定義順序調(diào)整為:a:link例证、a:visited路呜、a:hover,這時织咧,無論你鼠標(biāo)經(jīng)過的鏈接有沒有被訪問過胀葱,他都會變成綠色。

這是因為笙蒙,一個鼠標(biāo)經(jīng)過的未訪問鏈接同時擁有a:link抵屿、a:hover兩種屬性,在第一種情況下捅位,a:link離他最近轧葛,所以他優(yōu)先滿足a:link,而放棄a:hover的重復(fù)定義艇搀。
在第二種情況尿扯,無論連接有沒有被訪問過,他首先要檢查是否符合a:hover的標(biāo)準(zhǔn)(即是否有鼠標(biāo)經(jīng)過它)中符,滿足則變成綠色姜胖,不滿足則繼續(xù)向上查找,一直找到滿足條件的定義為止淀散。

在css中右莱,如果對于相同元素有針對不同條件的定義,宜將最一般的條件放在最上面档插,并依次向下慢蜓,保證最下面的是最特殊的條件,這樣郭膛,瀏覽器在顯示元素時晨抡,才會從特殊到一般、逐級向上驗證條件则剃,才會是你的每一個css語句都起到效果耘柱。當(dāng)然,如果故意打亂順序棍现,也會造成一些特殊的效果调煎,比如,可以執(zhí)照出下劃線顏色與文字顏色的差異己肮。

有老外提出一個便于記憶的“愛恨原則”(LoVe/HAte)士袄,即四種偽類的首字母:LVHA悲关。

再重復(fù)一邊正確的順序:a:link、a:visited娄柳、a:hover寓辱、a:active。

經(jīng)驗補充

  • 鼠標(biāo)經(jīng)過的“未訪問鏈接”同時擁有a:link赤拒、a:hover兩種屬性秫筏,后面的屬性會覆蓋前面的屬性定義;
  • 鼠標(biāo)經(jīng)過的“已訪問鏈接”同時擁有a:visited需了、a:hover 兩種屬性跳昼,后面的屬性會覆蓋前面的屬性定義;
    所以說:a:hover定義一定要放在a:link肋乍、a:visited的后面鹅颊!
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市墓造,隨后出現(xiàn)的幾起案子堪伍,更是在濱河造成了極大的恐慌,老刑警劉巖觅闽,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件帝雇,死亡現(xiàn)場離奇詭異,居然都是意外死亡蛉拙,警方通過查閱死者的電腦和手機(jī)尸闸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來孕锄,“玉大人吮廉,你說我怎么就攤上這事』粒” “怎么了宦芦?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長轴脐。 經(jīng)常有香客問我调卑,道長,這世上最難降的妖魔是什么大咱? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任恬涧,我火速辦了婚禮,結(jié)果婚禮上碴巾,老公的妹妹穿的比我還像新娘溯捆。我一直安慰自己,他們只是感情好餐抢,可當(dāng)我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布现使。 她就那樣靜靜地躺著,像睡著了一般旷痕。 火紅的嫁衣襯著肌膚如雪碳锈。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天欺抗,我揣著相機(jī)與錄音售碳,去河邊找鬼。 笑死绞呈,一個胖子當(dāng)著我的面吹牛贸人,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播佃声,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼艺智,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了圾亏?” 一聲冷哼從身側(cè)響起十拣,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎志鹃,沒想到半個月后夭问,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡曹铃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年缰趋,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陕见。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡秘血,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出淳玩,到底是詐尸還是另有隱情直撤,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布蜕着,位于F島的核電站谋竖,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏承匣。R本人自食惡果不足惜蓖乘,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望韧骗。 院中可真熱鬧嘉抒,春花似錦、人聲如沸袍暴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至岗宣,卻和暖如春蚂会,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背耗式。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工胁住, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人刊咳。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓彪见,卻偏偏與公主長得像,于是被迫代替她去往敵國和親娱挨。 傳聞我的和親對象是個殘疾皇子余指,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,612評論 2 350

推薦閱讀更多精彩內(nèi)容