佳木斯湛栽影视文化发展公司

主頁(yè) > 知識(shí)庫(kù) > 超連接的四種狀態(tài)的應(yīng)用詳細(xì)講解

超連接的四種狀態(tài)的應(yīng)用詳細(xì)講解

熱門(mén)標(biāo)簽:阿里云 檢查注冊(cè)表項(xiàng) 使用U盤(pán)裝系統(tǒng) 百度競(jìng)價(jià)點(diǎn)擊價(jià)格的計(jì)算公式 網(wǎng)站建設(shè) 智能手機(jī) 美圖手機(jī) 硅谷的囚徒呼叫中心

雖然你認(rèn)為可能原因是瀏覽器問(wèn)題,但是更多的可能是你樣式定義時(shí)順序錯(cuò)誤。為了保證能看到不同狀態(tài)下的連接樣式,正確的樣式順序應(yīng)該是:

" link - visited - hover - active "或" LVHA "(縮寫(xiě))。

核心內(nèi)容:

每個(gè)選擇符selector都有一個(gè)“specificity”如果兩個(gè)selectors應(yīng)用于同一個(gè)元素,具有較高specificity的選擇符將勝出,具有優(yōu)先權(quán)。例如:

P.hithere {color: green;} /* specificity = 1,1 */P {color: red;} /* specificity = 1 */

任何設(shè)置了類(lèi)class=hithere的段落內(nèi)容顯示為綠色而不是紅色。兩個(gè)selectors都設(shè)置了顏色,但是具有更高specificity的選擇符將勝出。

偽類(lèi)如何影響specificity呢?它們具有完全相同的加權(quán)值,下列樣式具有相同的specificity加權(quán)值:

A:link {color: blue;} /* specificity = 1,1 */A:active {color: red;} /* specificity = 1,1 */A:hover {color: magenta;} /* specificity = 1,1 */A:visited {color: purple;} /* specificity = 1,1 */

這些都是用于超鏈接的樣式設(shè)置。大部分情況下需要同時(shí)設(shè)置其中的幾個(gè)樣式,例如,一個(gè)未被訪問(wèn)的超鏈接在鼠標(biāo)懸停和點(diǎn)擊時(shí)可設(shè)置“鼠標(biāo)懸停”和“鼠標(biāo)激活“兩種狀態(tài)下的不同樣式,由于上述三個(gè)規(guī)則都可應(yīng)用于超鏈接,并且全部選擇符具備相同的specificity,那么根據(jù)規(guī)則,最后一個(gè)樣式“勝出”。所以" active "式樣永遠(yuǎn)也不會(huì)顯示出來(lái),因?yàn)樗偸潜?quot; hover "式樣覆蓋(即" hover "優(yōu)先)?,F(xiàn)在再來(lái)分析一下已經(jīng)被訪問(wèn)過(guò)的超鏈接鼠標(biāo)懸停是什么效果,結(jié)果永遠(yuǎn)是purple紫色的:( ,因?yàn)樗?quot; visited "式樣總是優(yōu)先于其它的狀態(tài)樣式規(guī)則(包括" active "和" hover")而顯示。

這就是為什么CSS1推薦樣式順序的原因:

A:linkA:visitedA:hoverA:active

實(shí)際上,開(kāi)頭兩個(gè)樣式的順序可以調(diào)換,因?yàn)橐粋€(gè)超鏈接不可能同時(shí)存在“未訪問(wèn)”和“已訪問(wèn)”兩種狀態(tài)。( :link意思是" unvisited ";我不知道為什么不這樣定義呢.)

CSS2現(xiàn)在允許偽類(lèi)可以以“聯(lián)合成組”形式出現(xiàn),例如:

A:visited:hover {color: maroon;} /* specificity = 2,1 */A:link:hover {color: magenta;} /* specificity = 2,1 */A:hover:active {color: cyan;} /* specificity = 2,1 */

They have the same specificity, but they apply to fundamentally different beasts, and so don't conflict. You can get hover-active combinations, for example.

如何理解本文當(dāng)中所涉及到的“specificity”呢?specificity可以理解未簡(jiǎn)單地連在一起的號(hào)碼字符串,上面的一個(gè)例子:P.hithere {color: green;} /* specificity = 11 */P {color: red;} /* specificity = 1 */

這好像是一個(gè)基于十進(jìn)制的簡(jiǎn)單運(yùn)算。然而計(jì)算“specificity”不能使用十進(jìn)制算法,例如你把15種選擇符連在一起使用、它們具有的“specificity”加權(quán)值還是比簡(jiǎn)單的class選擇符低。舉例:

.hello {color: red;} /* specificity = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = 15 */

" 10 "實(shí)際上是一個(gè)“1”后面接著“零”、不是"十",我們可以使用十六進(jìn)制描述前面的樣式規(guī)則的specificitiy,像下面:

.hello {color: red;} /* specificity = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = F */

唯一的問(wèn)題是如果你想為第二個(gè)樣式規(guī)則增加兩個(gè)或更多的選擇符時(shí),那時(shí)你就可能得到一個(gè)“17”的specificity、會(huì)再一次混淆。事實(shí)上specificity可能是無(wú)窮大的,所以為了避免更多的混亂,建議使用逗號(hào)來(lái)分隔specificity的值。

站長(zhǎng)建議:反復(fù)練習(xí)specificity的加權(quán)值的計(jì)算,網(wǎng)站CSS的設(shè)置體現(xiàn)了你控制頁(yè)面的能力,在動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)中,CSS的地位也是非常重要的,多看資料,多練習(xí),多來(lái)腳本之家!如果你喜歡本站就代為宣傳吧!謝謝閱讀。

標(biāo)簽:黃山 通遼 懷化 湖北 賀州 煙臺(tái) 山南 湘潭

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《超連接的四種狀態(tài)的應(yīng)用詳細(xì)講解》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢(xún)

    • 400-1100-266
    涟水县| 双鸭山市| 德江县| 大同市| 星子县| 阳山县| 广元市| 弥渡县| 蓬溪县| 新巴尔虎左旗| 资溪县| 松溪县| 三江| 金堂县| 华容县| 韶山市| 哈尔滨市| 门源| 莒南县| 长白| 北碚区| 固始县| 清丰县| 宁强县| 额济纳旗| 河南省| 黎川县| 汾西县| 甘泉县| 白河县| 抚顺市| 中卫市| 桐城市| 青田县| 关岭| 大石桥市| 吉隆县| 托克逊县| 屏东县| 萨迦县| 黄山市|