2.9  偽類

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

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

.bigfirst:first-letter {

font-size :400%;

float  :left;

}

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

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

a:link  { color:blue; }

a:visited { color:lightblue; }

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

a:hover {

color  ??:white;

background:red;

}

這里，使用了只有單個參數的background屬性而不是較長的background-color屬性。active偽類也是動態(tài)的，因為它在按下和釋放鼠標按鈕之間改變鏈接顯示——如下規(guī)則所示，它將鏈接的顏色改為深藍色：

a:active { color:darkblue; }

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

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