2.9  偽類

只在樣式表中使用的許多選擇器和類在HTML中沒有匹配的標(biāo)記或特性。它們的任務(wù)是使用除名稱和特性外的特征或不能從文檔樹中推論的內(nèi)容對元素進(jìn)行分類。其中包括像first-line、first-child和first-letter這樣的偽類。

偽類通過冒號(:)與元素隔開。要創(chuàng)建一個名為bigfirst的類來突出元素的第一個字母，可使用下列規(guī)則：

.bigfirst:first-letter {

font-size :400%;

float  :left;

}

當(dāng)將bigfirst類應(yīng)用于一個元素時，第一個字母的顯示尺寸會放大，而其余文本(正常大小)整齊地圍繞著它(因?yàn)橛衒loat屬性)，就好像第一個字母是一幅圖像或其他對象一樣。

其他偽類包括hover、link、active和visited，這些主要應(yīng)用于錨元素，如下規(guī)則所示，其將所有鏈接的默認(rèn)顏色設(shè)置為藍(lán)色，已訪問過的鏈接為淡藍(lán)色：

a:link  { color:blue; }

a:visited { color:lightblue; }

下列一對規(guī)則很有意思，因?yàn)樗褂胔over偽類，這意味著它們只在鼠標(biāo)指針懸停在元素上方時才應(yīng)用。在這個例子中，將鏈接改為紅底白字，實(shí)現(xiàn)了只有靠JavaScript代碼才能實(shí)現(xiàn)的動態(tài)效果：

a:hover {

color  ??:white;

background:red;

}

這里，使用了只有單個參數(shù)的background屬性而不是較長的background-color屬性。active偽類也是動態(tài)的，因?yàn)樗诎聪潞歪尫攀髽?biāo)按鈕之間改變鏈接顯示——如下規(guī)則所示，它將鏈接的顏色改為深藍(lán)色：

a:active { color:darkblue; }

另一個有趣的動態(tài)偽類是focus，它只在元素被用戶通過鍵盤或鼠標(biāo)選擇而獲得焦點(diǎn)時應(yīng)用，如下規(guī)則所示，其使用通用選擇器總是在當(dāng)前獲得焦點(diǎn)的對象周圍加一個中灰的、2像素的虛線邊框：

*:focus { border:2px dotted #888888; }