本文向大家簡單介紹一下CSS偽元素的用法，CSS偽元素用于將特殊的效果添加到某些選擇器，這里和大家分享一下first-line偽元素和first-letter偽元素的用法，以及CSS偽元素和CSS偽類的聯(lián)系。

CSS偽元素

CSS偽元素用于將特殊的效果添加到某些選擇器。

CSS偽元素語法：

選擇器:偽元素{屬性:值}  
 

CSS類也可以與偽元素配合使用：

選擇器.類:偽元素{屬性:值}  
 

:first-line偽元素

"first-line"偽元素用于向某個選擇器中的文字的首行添加特殊樣式：

p{font-size:12pt}  
p:first-line{color:#0000FF;font-variant:small-caps}  
 
<p>Sometextthatendsupontwoormorelines</p> 

在上面的例子中，瀏覽器顯示根據(jù)first-line偽元素格式化的第一行。瀏覽器是依靠瀏覽器窗口的尺寸來進行分行的。

提示：CSS偽元素中first-line偽元素僅能被用于塊級元素。

提示：下面的屬性可以被應(yīng)用到first-line偽元素。

font屬性  
 
color屬性  
background屬性  
word-spacing  
letter-spacing  
text-decoration  
vertical-align  
text-transform  
line-height  
clear  

:first-letter偽元素

CSS偽元素中first-letter偽元素用于向某個選擇器中的文本的首字母添加特殊的樣式：

p{font-size:12pt}  
p:first-letter{font-size:200%;float:left}  
 
<p>Thefirstwordsofanarticle.</p> 

輸出的效果類似于：

___  
|hefirst  
|wordsofan  
 

article.font屬性
color屬性
background屬性
margin屬性
padding屬性
border屬性
text-decoration
vertical-align(僅當(dāng)float為none時)
text-transform
line-height
float
clear        #p#

CSS偽元素和CSS類

CSS偽元素可以與CSS類配合使用：

p.article:first-letter{color:#FF0000}  
<pclasspclass="article">文章中的一個段落。</p> 
 

上面的例子會使所有class為article的段落的首字母變?yōu)榧t色。

多重CSS偽元素

多個偽元素可以配合在一起使用：

p{font-size:12pt;}  
p:first-letter{color:#FF0000;font-size:24pt;}  
p:first-line{color:#0000FF;}  
<p>Thefirstwordsofanarticle</p> 
 

輸出的效果類似于：

__  
|hefirst  
|wordsofan  
 

article.在上面的例子中，段落的首字母將是字號為24pt的紅色。首行的其余部分將會是藍色，而段落的其余部分會是默認的顏色。

CSS2-:before偽元素

CSS偽元素中before偽元素可用于在某個元素之前插入某些內(nèi)容。

下面的樣式會在標(biāo)題之前播放音頻：

h1:before  
{  
content:url(beep.wav)  
}  
 

CSS2-:after偽元素

CSS偽元素中after偽類可用于在某個元素之后插入某些內(nèi)容。

下面的樣式會在標(biāo)題之后播放音頻：

h1:after  
{  
content:url(beep.wav)  
}  
 

CSS偽元素

瀏覽器支持：IE:InternetExplorer,F:Firefox,N:Netscape。

W3C：“W3C”列的數(shù)字顯示出屬性背景由哪個CSS標(biāo)準(zhǔn)定義（CSS1還是CSS2）。

【編輯推薦】

1. IE中中CSS偽類:hover的使用及其BUG
2. 深入學(xué)習(xí)CSS偽類使用
3. CSS樣式表設(shè)計十個雕蟲小技
4. 深入學(xué)習(xí)六大CSS選擇符的使用
5. 解讀DIV CSS網(wǎng)頁布局中CSS無效十個原因