摘要：偽元素選擇器和偽類一樣，偽元素也用于向選擇器添加特殊的效果。另外，偽元素前的是偽元素選擇器的標(biāo)識(shí)，不能省略。偽元素的使用在后面添加內(nèi)容并設(shè)置該內(nèi)容的背景顏色這是使用偽元素添加的內(nèi)容設(shè)置添加的內(nèi)容偽元素選擇器可以是任意類型的選擇器。

在上一篇文章中，我們講到基礎(chǔ)選擇器中的元素選擇器、ID選擇器、類選擇器。本期我們繼續(xù)看一下偽類選擇器、偽元素選擇器、通用選擇器的使用方法。

偽類選擇器

偽類是指邏輯上存在、但文檔樹(shù)中并不存在的“幽靈”分類，通常用于給元素某些特定狀態(tài)添加樣式。

偽類典型的應(yīng)用就是為超鏈接添加未訪問(wèn)、訪問(wèn)過(guò)后、懸停和活動(dòng)四種鏈接狀態(tài)。從效果上看，存在偽類對(duì)應(yīng)的類名，但實(shí)際上并沒(méi)有這個(gè)類名，因此稱之為偽類。

使用偽類選擇器設(shè)置樣式的語(yǔ)法如下：

選擇器 : 偽類 { 
 屬性 1: 屬性值 1；
 屬性 2: 屬性值 2；
 ... 
}

語(yǔ)法說(shuō)明：選擇器可以是任意類型的選擇器，偽類前的“:”是偽類選擇器的標(biāo)識(shí)，不能省略。表 2-1 列出了一些 W3C 規(guī)定的偽類。

上表主要列舉了 CSS2 中的一些偽類，還有一些有關(guān) CSS3 的偽類將在本系列叢書后續(xù)的 CSS3 中進(jìn)行一一介紹。

:active、:hover、:link 和 :visited 主要用于描述超鏈接的四種狀態(tài)，我們將在介紹超鏈接時(shí)演示這些偽類的用法；

cus 偽類的用法將在表單章節(jié)中進(jìn)行演示。在本小節(jié)將演示 :first-child 偽類，以讓大家熟悉偽類的使用方法。

【示例 2-10】使用偽類設(shè)置文檔樹(shù)中每層的第一個(gè)子元素的樣式。

     
 妙味零基礎(chǔ)課程 
     
 妙味 JavaScript 課程 
     
 妙味移動(dòng)端課程 

上述代碼中的“

示例 2-10 也可以不使用偽類而使用實(shí)際的類來(lái)達(dá)到同樣的樣式設(shè)置效果。為了使用實(shí)際的類來(lái)達(dá)到示例 2-10 的效果，需要在第一個(gè)段落標(biāo)簽中添加一個(gè)類名，并對(duì)該類名設(shè)置一個(gè)類選擇器樣式。

將示例 2-10 的代碼做如下修改：

     
 妙味零基礎(chǔ)課程 
     
 妙味 JavaScript 課程 
     
 妙味移動(dòng)端課程 

上述代碼的運(yùn)行效果和示例 2-10 完全等效。可見(jiàn)，偽類相當(dāng)于在文檔中存在一個(gè)對(duì)應(yīng)的類，這正是偽類之所以稱為“偽類”的原因。

偽元素選擇器

和偽類一樣，偽元素也用于向選擇器添加特殊的效果。偽元素之所有稱為“偽元素”，原因是偽元素只是在邏輯上存在但在文檔樹(shù)中卻并不存在的“幽靈”元素，即從效果上看，文檔樹(shù)中存在對(duì)應(yīng)偽元素的元素，但實(shí)際上在代碼中并不存在這樣的元素。

使用偽元素選擇器設(shè)置樣式的語(yǔ)法如下：

選擇器 : 偽元素 { 
     屬性 1: 屬性值 1；
     屬性 2: 屬性值 2；
 ...
}

語(yǔ)法說(shuō)明：選擇器可以是任意類型的選擇器，當(dāng)選擇器是類選擇器時(shí)，為了限定某類元素，也可以在類選擇器名前加上元素名，即將選擇器名寫成：元素名 . 類選擇器名，比如 div.second:first-line。

另外，偽元素前的“:”是偽元素選擇器的標(biāo)識(shí)，不能省略。從上述語(yǔ)法來(lái)看，偽類和偽元素的寫法很類似，在 CSS3 中，為了區(qū)分兩者，規(guī)定偽類用一個(gè)冒號(hào)來(lái)表示，而偽元素則用兩個(gè)冒號(hào)來(lái)表示。

目前，W3C 規(guī)定了表 2-2 所示的一些類型的偽元素。

下面將通過(guò)示例演示上述各個(gè)偽元素的使用方法。

【示例 2-11】使用偽元素 first-line 設(shè)置文本的首行的樣式。

    
 偽元素選擇器可以是任意類型的選擇器。當(dāng)選擇器是類選擇器時(shí)，為了限定某類元素，也可以在類選擇器名前加上元素名，即將選擇器名寫成：元素名 . 類選擇器名，比如 div.second:first。

上述代碼中的“div:first-line”是一個(gè)偽類選擇器，用于選擇 div 內(nèi)容中的首行。該選擇器設(shè)置了首行的背景顏色樣式，運(yùn)行結(jié)果如圖 2-11 所示。

【示例 2-12】使用偽元素 first-letter 設(shè)置文本的第一個(gè)字符樣式。

     
 偽元素選擇器可以是任意類型的選擇器。

上述代碼中的”div:first-letter”是一個(gè)偽元素選擇器，用于選擇 div 內(nèi)容中的第一個(gè)字符。該選擇器設(shè)置了第一個(gè)字符的字號(hào)大小，運(yùn)行結(jié)果如圖 2-12 所示。

【示例 2-13】使用偽元素 before 在元素前面添加內(nèi)容并設(shè)置該內(nèi)容的樣式。

 
 偽元素選擇器可以是任意類型的選擇器。

上述代碼中的“div:before”是一個(gè)偽元素選擇器，用于在 div 內(nèi)容前面添加一串文本（文本內(nèi)容使用 content 屬性來(lái)添加），同時(shí)設(shè)置這些文本的背景色，運(yùn)行結(jié)果如圖 2-13 所示。

【示例 2-14】使用偽元素 after 在元素后面添加內(nèi)容并設(shè)置該內(nèi)容的樣式。

    
 偽元素選擇器可以是任意類型的選擇器。
    

上述代碼中的“div:after”是一個(gè)偽元素選擇器，用于在 div 內(nèi)容后面添加一串文本（文本內(nèi)容使用 content 屬性來(lái)添加），同時(shí)設(shè)置這些文本的背景顏色，運(yùn)行結(jié)果如圖 2-14 所示。

和偽類可以使用具體的類來(lái)達(dá)到同等效果一樣，偽元素也可以使用具體的元素來(lái)達(dá)到同等效果。此時(shí)需要在代碼的相應(yīng)位置添加一個(gè)元素，同時(shí)使用元素選擇器對(duì)該元素設(shè)置樣式。

下面以示例 2-12 為例，將示例 2-12 的代碼修改如下：

    
    
    
    
    
    
    
    
        
 偽  元素選擇器可以是任意類型的選擇器。
    
    

上述代碼的運(yùn)行效果和示例 2-12 的運(yùn)行效果完全一樣。可見(jiàn)，偽元素相當(dāng)于在文檔中存在一個(gè)對(duì)應(yīng)的元素，這正是偽元素之所以稱為“偽元素”的原因。

通用選擇器

通用選擇器又稱為通配符選擇器，使用通配符“*”表示，它可以選擇文檔中的所有元素。

使用通用選擇器設(shè)置樣式的語(yǔ)法如下：

    *{ 
     屬性 1: 屬性值 1；
     屬性 2: 屬性值 2；
     ...
    }

很多元素在不同的瀏覽器中的默認(rèn)樣式是不一樣的，因此，為了兼容不同的瀏覽器，需要重置元素的默認(rèn)樣式。最簡(jiǎn)單的重置元素樣式的方法就是使用通用選擇器，其中最常用的是使用通用選擇器來(lái)重置文檔元素的內(nèi)、外邊距。

示例代碼如下：

/* 重置文檔所有元素的內(nèi)、外邊距為 0px*/
*{
    margin:0px; /* 設(shè)置元素的四個(gè)方向的外邊距為 0px*/
    padding:0px; /* 設(shè)置元素的四個(gè)方向的內(nèi)邊距為 0px*/
}

上述設(shè)置方式雖然簡(jiǎn)單，但對(duì)性能影響比較大，所以實(shí)際應(yīng)用中不建議使用通用選擇器來(lái)重置樣式。

到這里，我們已經(jīng)把基礎(chǔ)選擇器都介紹完畢了，下一節(jié)我們?cè)賮?lái)看看復(fù)合選擇器相關(guān)的內(nèi)容。