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

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

偽類選擇器

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

偽類典型的應用就是為超鏈接添加未訪問、訪問過后、懸停和活動四種鏈接狀態。從效果上看，存在偽類對應的類名，但實際上并沒有這個類名，因此稱之為偽類。

使用偽類選擇器設置樣式的語法如下：

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

語法說明：選擇器可以是任意類型的選擇器，偽類前的“:”是偽類選擇器的標識，不能省略。表 2-1 列出了一些 W3C 規定的偽類。

上表主要列舉了 CSS2 中的一些偽類，還有一些有關 CSS3 的偽類將在本系列叢書后續的 CSS3 中進行一一介紹。

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

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

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

     
 妙味零基礎課程 
     
 妙味 JavaScript 課程 
     
 妙味移動端課程 

上述代碼中的“

示例 2-10 也可以不使用偽類而使用實際的類來達到同樣的樣式設置效果。為了使用實際的類來達到示例 2-10 的效果，需要在第一個段落標簽中添加一個類名，并對該類名設置一個類選擇器樣式。

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

     
 妙味零基礎課程 
     
 妙味 JavaScript 課程 
     
 妙味移動端課程 

上述代碼的運行效果和示例 2-10 完全等效。可見，偽類相當于在文檔中存在一個對應的類，這正是偽類之所以稱為“偽類”的原因。

偽元素選擇器

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

使用偽元素選擇器設置樣式的語法如下：

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

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

另外，偽元素前的“:”是偽元素選擇器的標識，不能省略。從上述語法來看，偽類和偽元素的寫法很類似，在 CSS3 中，為了區分兩者，規定偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。

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

下面將通過示例演示上述各個偽元素的使用方法。

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

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

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

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

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

上述代碼中的”div:first-letter”是一個偽元素選擇器，用于選擇 div 內容中的第一個字符。該選擇器設置了第一個字符的字號大小，運行結果如圖 2-12 所示。

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

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

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

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

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

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

和偽類可以使用具體的類來達到同等效果一樣，偽元素也可以使用具體的元素來達到同等效果。此時需要在代碼的相應位置添加一個元素，同時使用元素選擇器對該元素設置樣式。

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

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

上述代碼的運行效果和示例 2-12 的運行效果完全一樣。可見，偽元素相當于在文檔中存在一個對應的元素，這正是偽元素之所以稱為“偽元素”的原因。

通用選擇器

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

使用通用選擇器設置樣式的語法如下：

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

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

示例代碼如下：

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

上述設置方式雖然簡單，但對性能影響比較大，所以實際應用中不建議使用通用選擇器來重置樣式。

到這里，我們已經把基礎選擇器都介紹完畢了，下一節我們再來看看復合選擇器相關的內容。