第一個偽元素用于設(shè)置一個塊級元素首字母的樣式,而且僅對該首字母設(shè)置樣式:
p:first-letter {color: red;}
這個規(guī)則會把毎一段的第一個字母變成紅色?;蛘?,如果讓每個h2中第一個字母的大小是標(biāo)題中其余字母大小的兩倍:
h2:first-letter {font-size: 200%;}
前面提到過,這個規(guī)則會導(dǎo)致用戶代理對一個假想的元素作出響應(yīng),這個假想元素包含每個h2中的第一個字母。可能如下所示:
<h2><h2:first-letter>T</h2:first-letter>his is an h2 element</h2>
:first-letter樣式只應(yīng)用到上例所示假想元素的內(nèi)容。這個<h2:first:-letter>元素并不出現(xiàn)在設(shè)計網(wǎng)頁的文檔源代碼中。相反,它是由用戶代理動態(tài)構(gòu)造的,用于向相應(yīng)文本塊應(yīng)用:first-letter樣式。換句話說,<h2:first-letter>是一個偽元素。要記住,不必增加任何新標(biāo)記。這會由網(wǎng)頁瀏覽器完成。
類似地,:first-line可以用來影響元素中第一個文本行。例如,可以讓一個文檔中第一段的第一行變成紫色:
p:first-line {color: purple;}
這個樣式應(yīng)用于每一段所顯示的第一行文本。不論顯示區(qū)域多大或多小,都是如此。如果第一行只包含該段的5個詞,那么只有這5個詞會變成紫色。如果第一行包含了元素的前30個詞,那么所有這30個詞都會是紫色。
由于從“This”到“only”的文本都應(yīng)當(dāng)是紫色,所以網(wǎng)頁瀏覽器使用了一個假想標(biāo)記,如下所示:
<p><p:first-line>This is a paragraph of text that has only</p: first-line>
one stylesheet applied to it. That style
causes the first line to be purple. No other…
如果第一行文本編輯為只包含這一段的前7個詞,那么假想的</p:first-line>會前移,出現(xiàn)在“that”后面。
:first-letter 和:first-line 的限制
在CSS2中,:firsti-letter和:first-line偽元素只能應(yīng)用于標(biāo)記或段落之類的塊級元素,而不能應(yīng)用于超鏈接等的行內(nèi)元素。在CSS2.1中,:first-letter能應(yīng)用到所有元素。不過能應(yīng)用:first-line和:first-letter的CSS屬性還是有一些限制。表2-4顯示了這些限制。
設(shè)置之前和之后元素的樣式
假設(shè)想設(shè)置一種排版效果,在每個h2元素前加一對銀色中括號:
h2:before {content:color: silver;}
CSS2.1允許插入生成的內(nèi)容,然后使用偽元素:before和:after直接設(shè)置樣式。圖 2-27給出了一個例子。
偽元素用于插入生成的內(nèi)容,并設(shè)置其樣式。要在一個元素后面插入內(nèi)容,可以使用偽元素:after??梢栽谖臋n的最后用一個適當(dāng)?shù)慕Y(jié)束語結(jié)束:
body:after {content:" The End.";}
所生成的內(nèi)容是一個單獨的主體,有關(guān)內(nèi)容(包括:before和:after的更多信息)將在以后更全面地介紹。
通過根據(jù)設(shè)計網(wǎng)頁中文檔的語言來使用選擇器,網(wǎng)頁設(shè)計師可以創(chuàng)建豐富的CSS規(guī)則。我們可以構(gòu)建只應(yīng)用于少數(shù)元素的簡單規(guī)則,對大量類似元素應(yīng)用樣式也同樣簡單。由于可以對選擇器和規(guī)則分組,這使得樣式表相當(dāng)簡潔,而且非常靈活,相應(yīng)地可以縮小文件的大小,縮短下載時間。
網(wǎng)頁瀏覽器通常必須慎用選擇器,因為如果不能正確地解釋選擇器,會導(dǎo)致用戶代理根本無法使用CSS。另一方面,網(wǎng)頁設(shè)計師要正確地編寫選擇器,這很關(guān)鍵,因為一旦有錯誤,用戶代理將不能按預(yù)想的那樣應(yīng)用樣式。要想正確地理解選擇器以及如何組合選擇器,需要深入地掌握選擇器與文檔結(jié)構(gòu)的關(guān)系,并了解繼承和層疊等機(jī)制在確定如何為元素設(shè)置樣式時有怎樣的作用。這正是以后要討論的內(nèi)容。