設置首字母樣式

第一個偽元素用于設置一個塊級元素首字母的樣式，而且僅對該首字母設置樣式：

p:first-letter {color: red;}

這個規(guī)則會把毎一段的第一個字母變成紅色。或者，如果讓每個h2中第一個字母的大小是標題中其余字母大小的兩倍：

h2:first-letter {font-size: 200%;}

前面提到過，這個規(guī)則會導致用戶代理對一個假想的元素作出響應，這個假想元素包含每個h2中的第一個字母?？赡苋缦滤荆?/p>

<h2><h2:first-letter>T</h2:first-letter>his is an h2 element</h2>

:first-letter樣式只應用到上例所示假想元素的內容。這個<h2:first:-letter>元素并不出現(xiàn)在設計網(wǎng)頁的文檔源代碼中。相反，它是由用戶代理動態(tài)構造的，用于向相應文本塊應用：first-letter樣式。換句話說，<h2:first-letter>是一個偽元素。要記住，不必增加任何新標記。這會由網(wǎng)頁瀏覽器完成。

設置第一行的樣式

類似地，：first-line可以用來影響元素中第一個文本行。例如，可以讓一個文檔中第一段的第一行變成紫色：

p:first-line {color: purple;}

這個樣式應用于每一段所顯示的第一行文本。不論顯示區(qū)域多大或多小，都是如此。如果第一行只包含該段的5個詞，那么只有這5個詞會變成紫色。如果第一行包含了元素的前30個詞，那么所有這30個詞都會是紫色。

由于從“This”到“only”的文本都應當是紫色，所以網(wǎng)頁瀏覽器使用了一個假想標記，如下所示：

<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偽元素只能應用于標記或段落之類的塊級元素，而不能應用于超鏈接等的行內元素。在CSS2.1中，:first-letter能應用到所有元素。不過能應用：first-line和：first-letter的CSS屬性還是有一些限制。表2-4顯示了這些限制。

設置之前和之后元素的樣式

假設想設置一種排版效果，在每個h2元素前加一對銀色中括號：

h2:before {content:color: silver;}

CSS2.1允許插入生成的內容，然后使用偽元素：before和：after直接設置樣式。圖 2-27給出了一個例子。

偽元素用于插入生成的內容，并設置其樣式。要在一個元素后面插入內容，可以使用偽元素：after?？梢栽谖臋n的最后用一個適當?shù)慕Y束語結束：

body:after {content:" The End.";}

所生成的內容是一個單獨的主體，有關內容（包括：before和:after的更多信息）將在以后更全面地介紹。

小結

通過根據(jù)設計網(wǎng)頁中文檔的語言來使用選擇器，網(wǎng)頁設計師可以創(chuàng)建豐富的CSS規(guī)則。我們可以構建只應用于少數(shù)元素的簡單規(guī)則，對大量類似元素應用樣式也同樣簡單。由于可以對選擇器和規(guī)則分組，這使得樣式表相當簡潔，而且非常靈活，相應地可以縮小文件的大小，縮短下載時間。

網(wǎng)頁瀏覽器通常必須慎用選擇器，因為如果不能正確地解釋選擇器，會導致用戶代理根本無法使用CSS。另一方面，網(wǎng)頁設計師要正確地編寫選擇器，這很關鍵，因為一旦有錯誤，用戶代理將不能按預想的那樣應用樣式。要想正確地理解選擇器以及如何組合選擇器，需要深入地掌握選擇器與文檔結構的關系，并了解繼承和層疊等機制在確定如何為元素設置樣式時有怎樣的作用。這正是以后要討論的內容。