偽類(lèi)是什么？

偽類(lèi)（pseudo-class）令你能夠在為HTML元素界說(shuō)CSS特點(diǎn)的時(shí)候?qū)�條件和事件考慮在內(nèi)。

咱們來(lái)看一個(gè)比如。正如你所知道的，在HTML里，鏈接是經(jīng)過(guò)a元素來(lái)界說(shuō)的。因此，在CSS里，咱們能夠?qū)�a作為一個(gè)選擇器（selector）：

a {color: blue;}

一個(gè)鏈接能夠有不同的狀況。例如，它能夠是已訪問(wèn)過(guò)的，也能夠是未訪問(wèn)過(guò)的。你能夠經(jīng)過(guò)偽類(lèi)別離為訪問(wèn)過(guò)的鏈接和未訪問(wèn)過(guò)的鏈接設(shè)置不同的款式。

a:link {color: blue;}a:visited {color: red;}

為未訪問(wèn)過(guò)的鏈接和已訪問(wèn)過(guò)的鏈接別離使用偽類(lèi)a:link和a:visited。活動(dòng)的鏈接對(duì)應(yīng)的偽類(lèi)為a:active，有鼠標(biāo)懸停的鏈接對(duì)應(yīng)的偽類(lèi)為a:hover。

咱們將逐個(gè)解釋這四個(gè)偽類(lèi)，并給出示例。

偽類(lèi)：link

偽類(lèi):link用于閱讀者從未訪問(wèn)過(guò)的鏈接。

在下面的示例代碼中，咱們將未訪問(wèn)過(guò)的鏈接設(shè)為淺藍(lán)色。

a:link {color: #6699CC;}

偽類(lèi)： visited

偽類(lèi):visited用于閱讀者已訪問(wèn)過(guò)的鏈接。比方，下面的代碼將已訪問(wèn)過(guò)的鏈接設(shè)為深紫色：

a:visited {color: #660099;}

偽類(lèi)： active

偽類(lèi):active用于活動(dòng)的鏈接（即獲得當(dāng)時(shí)焦點(diǎn)的鏈接）。

下例將活動(dòng)的鏈接設(shè)為具有黃色背景：

a:active {background-color: #FFFF00;}

偽類(lèi)： hover

偽類(lèi):hover用于有鼠標(biāo)懸停的鏈接。

這能制造出有趣的作用。例如，假如你要當(dāng)鼠標(biāo)光標(biāo)移到鏈接上時(shí)將鏈接顯示為橙色斜體，那么CSS能夠這樣寫(xiě)：

a:hover {color: orange;font-style: italic;}

例1：有鼠標(biāo)懸停的鏈接的作用

為鏈接設(shè)置懸停作用十分盛行。所以，咱們將多看幾個(gè):hover偽類(lèi)的比如。

例1a：字符距離

咱們?cè)诘?課學(xué)過(guò)，能夠用letter-spacing特點(diǎn)來(lái)調(diào)整字符距離。現(xiàn)在為了獲得特殊作用，咱們將它應(yīng)用到鏈接上：

a:hover {letter-spacing: 10px;font-weight:bold;color:red;}

例1b：大寫(xiě)和小寫(xiě)

同樣在第5課咱們學(xué)過(guò)，能夠經(jīng)過(guò)text-transform特點(diǎn)來(lái)轉(zhuǎn)換字母的大小寫(xiě)。這也可用于為鏈接制造作用：

a:hover {text-transform: uppercase;

font-weight:bold;

color:blue;

background-color:yellow;}

經(jīng)過(guò)上面兩個(gè)比如你會(huì)發(fā)現(xiàn)，咱們能夠經(jīng)過(guò)特點(diǎn)的組合創(chuàng)造出無(wú)數(shù)種作用。你能夠創(chuàng)建自己的作用——試試吧！