正文

CSS速成指南(13)

CSS插件工具箱 作者:(英)Robin Nixon


2.9  偽類

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

偽類通過冒號(hào)(:)與元素隔開。要?jiǎng)?chuàng)建一個(gè)名為bigfirst的類來突出元素的第一個(gè)字母,可使用下列規(guī)則:

.bigfirst:first-letter {

font-size :400%;

float  :left;

}

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

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

a:link  { color:blue; }

a:visited { color:lightblue; }

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

a:hover {

color  ??:white;

background:red;

}

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

a:active { color:darkblue; }

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

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


上一章目錄下一章

Copyright ? 讀書網(wǎng) ranfinancial.com 2005-2020, All Rights Reserved.
鄂ICP備15019699號(hào) 鄂公網(wǎng)安備 42010302001612號(hào)