偽類(偽類選擇器)

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括當(dāng)涂網(wǎng)站建設(shè)、當(dāng)涂網(wǎng)站制作、當(dāng)涂網(wǎng)頁(yè)制作以及當(dāng)涂網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，當(dāng)涂網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到當(dāng)涂省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

偽類：同一個(gè)標(biāo)簽，根據(jù)其不同的種狀態(tài)，有不同的樣式。這就叫做“偽類”。偽類用冒號(hào)來(lái)表示。

比如div是屬于box類，這一點(diǎn)很明確，就是屬于box類。但是a屬于什么類?不明確。因?yàn)樾枰从脩酎c(diǎn)擊前是什么狀態(tài)，點(diǎn)擊后是什么狀態(tài)。所以，就叫做“偽類”。

靜態(tài)偽類和動(dòng)態(tài)偽類

偽類選擇器分為兩種。

(1)靜態(tài)偽類：只能用于超鏈接的樣式。如下：

:link 超鏈接點(diǎn)擊之前

:visited 鏈接被訪問(wèn)過(guò)之后

PS：以上兩種樣式，只能用于超鏈接。

(2)動(dòng)態(tài)偽類：針對(duì)所有標(biāo)簽都適用的樣式。如下：

:hover “懸?！保菏髽?biāo)放到標(biāo)簽上的時(shí)候

:active “激活”： 鼠標(biāo)點(diǎn)擊標(biāo)簽，但是不松手時(shí)。

:focus 是某個(gè)標(biāo)簽獲得焦點(diǎn)時(shí)的樣式(比如某個(gè)輸入框獲得焦點(diǎn))

PS：以上三種樣式，只能用于超鏈接。

超鏈接a標(biāo)簽

超鏈接的四種狀態(tài)

a標(biāo)簽有4種偽類(即對(duì)應(yīng)四種狀態(tài))，要求背誦。如下：

:link “鏈接”：超鏈接點(diǎn)擊之前

:visited “訪問(wèn)過(guò)的”：鏈接被訪問(wèn)過(guò)之后

:hover “懸?！保菏髽?biāo)放到標(biāo)簽上的時(shí)候

:active “激活”： 鼠標(biāo)點(diǎn)擊標(biāo)簽，但是不松手時(shí)。

對(duì)應(yīng)的代碼如下：(不帶注釋)

a:link{

color:red;

}

a:visited{

color:orange;

}

a:hover{

color:green;

}

a:active{

color:black;

}

對(duì)應(yīng)的代碼如下：(帶注釋)

/*讓超鏈接點(diǎn)擊之前是紅色*/

a:link{

color:red;

}

/*讓超鏈接點(diǎn)擊之后是綠色*/

a:visited{

color:orange;

}

/*鼠標(biāo)懸停，放到標(biāo)簽上的時(shí)候*/

a:hover{

color:green;

}

/*鼠標(biāo)點(diǎn)擊鏈接，但是不松手的時(shí)候*/

a:active{

color:black;

記住，在css中，這四種狀態(tài)必須按照固定的順序?qū)懀?/p>

a:link 、a:visited 、a:hover 、a:active

如果不按照順序，那么將失效?！皭?ài)恨準(zhǔn)則”：love hate。必須先愛(ài)，后恨。

超鏈接的美化

問(wèn)：既然a{}定義了超鏈的屬性，和a:link{}定義了超鏈點(diǎn)擊之前的屬性，那這兩個(gè)有啥區(qū)別呢?

答：無(wú)錫看婦科哪里好 http://www.xasgfk.cn/

a{}和a:link{}的區(qū)別：

a{}定義的樣式針對(duì)所有的超鏈接(包括錨點(diǎn))

a:link{}定義的樣式針對(duì)所有寫(xiě)了href屬性的超鏈接(不包括錨點(diǎn))

超鏈接a標(biāo)簽在使用的時(shí)候，比較難。因?yàn)椴粌H僅要控制a這個(gè)盒子，也要控制它的偽類。

我們一定要將a標(biāo)簽寫(xiě)在前面，將:link、:visited、:hover、:active這些偽類寫(xiě)在后面。

為了實(shí)現(xiàn)上面這個(gè)效果，完整版代碼如下：

網(wǎng)站欄目

網(wǎng)站欄目

網(wǎng)站欄目

網(wǎng)站欄目

網(wǎng)站欄目

網(wǎng)站欄目

網(wǎng)站欄目

網(wǎng)站欄目

上方代碼中，我們發(fā)現(xiàn)，當(dāng)我們?cè)诙xa:link和 a:visited這兩個(gè)偽類的時(shí)候，如果它們的屬性相同，我們其實(shí)可以寫(xiě)在一起，用逗號(hào)隔開(kāi)就好，摘抄如下：

.nav ul li a{

display: block;

width: 120px;

height: 50px;

}

/*兩個(gè)偽類的屬性，可以用逗號(hào)隔開(kāi)*/

.nav ul li a:link , .nav ul li a:visited{

text-decoration: none;

background-color: purple;

color:white;

}

.nav ul li a:hover{

background-color: orange;

}

如上方代碼所示，最標(biāo)準(zhǔn)的寫(xiě)法，就是把link、visited、hover這三個(gè)偽類都要寫(xiě)。但是前端開(kāi)發(fā)工程師在大量的實(shí)踐中，發(fā)現(xiàn)不寫(xiě)link、visited也挺兼容。寫(xiě)法是：

a:link、a:visited都是可以省略的，簡(jiǎn)寫(xiě)在a標(biāo)簽里面。也就是說(shuō)，a標(biāo)簽涵蓋了link、visited的狀態(tài)(前提是都具有了相同的屬性)。寫(xiě)法如下：

.nav ul li a{

display: block;

width: 120px;

height: 50px;

text-decoration: none;

background-color: purple;

color:white;

}

.nav ul li a:hover{

background-color: orange;

}

當(dāng)然了，在寫(xiě)a:link、a:visited這兩個(gè)偽類的時(shí)候，要么同時(shí)寫(xiě)，要么同時(shí)不寫(xiě)。如果只寫(xiě)a屬性和a:link屬性，不規(guī)范。

動(dòng)態(tài)偽類舉例

我們?cè)诘谝欢沃忻枋鲞^(guò)，下面這三種動(dòng)態(tài)偽類，針對(duì)所有標(biāo)簽都適用。

:hover “懸?！保菏髽?biāo)放到標(biāo)簽上的時(shí)候

:active “激活”： 鼠標(biāo)點(diǎn)擊標(biāo)簽，但是不松手時(shí)。

:focus 是某個(gè)標(biāo)簽獲得焦點(diǎn)時(shí)的樣式(比如某個(gè)輸入框獲得焦點(diǎn))

當(dāng)前標(biāo)題：CSS選擇器：偽類
本文網(wǎng)址：http://chinadenli.net/article40/gophho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站策劃、品牌網(wǎng)站設(shè)計(jì)、小程序開(kāi)發(fā)、面包屑導(dǎo)航、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)