在上一篇文章中，我們講到基礎選擇器中的元素選擇器、ID選擇器、類選擇器。本期我們繼續(xù)看一下偽類選擇器、偽元素選擇器、通用選擇器的使用方法。
偽類選擇器
偽類是指邏輯上存在、但文檔樹中并不存在的“幽靈”分類，通常用于給元素某些特定狀態(tài)添加樣式。
偽類典型的應用就是為超鏈接添加未訪問、訪問過后、懸停和活動四種鏈接狀態(tài)。從效果上看，存在偽類對應的類名，但實際上并沒有這個類名，因此稱之為偽類。
使用偽類選擇器設置樣式的語法如下：
選擇器 : 偽類 {
屬性 1: 屬性值 1；
屬性 2: 屬性值 2；
...
}
語法說明：選擇器可以是任意類型的選擇器，偽類前的“:”是偽類選擇器的標識，不能省略。表 2-1 列出了一些 W3C 規(guī)定的偽類。
上表主要列舉了 CSS2 中的一些偽類，還有一些有關 CSS3 的偽類將在本系列叢書后續(xù)的 CSS3 中進行一一介紹。
:active、:hover、:link 和 :visited 主要用于描述超鏈接的四種狀態(tài)，我們將在介紹超鏈接時演示這些偽類的用法；
cus 偽類的用法將在表單章節(jié)中進行演示。在本小節(jié)將演示 :first-child 偽類，以讓大家熟悉偽類的使用方法。
【示例 2-10】使用偽類設置文檔樹中每層的第一個子元素的樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用偽類設置文檔樹中每層的第一個子元素的樣式 </title>
<style>
/* 設置文檔樹中每一層中類型為 piv 的第一個子元素的背景顏色 */
p:first-child{
background:#80C6BE;
}
</style>
</head>
<body>
<p> 妙味零基礎課程 </p>
<p> 妙味 JavaScript 課程 </p>
<p> 妙味移動端課程 </p>
</body>
</html>
上述代碼中的“<p></p>”是一個段落標簽對，用于創(chuàng)建一個段落。有關段落標簽的內(nèi)容請參見第 5 章。代碼中的“p:first-child”是一個偽類選擇器，表示選擇文檔樹中的每層元素的第一個子元素，且其類型為“p”。最終的結果是第一個 p 被設置為背景顏色，運行結果如圖2-10 所示。
示例 2-10 也可以不使用偽類而使用實際的類來達到同樣的樣式設置效果。為了使用實際的類來達到示例 2-10 的效果，需要在第一個段落標簽中添加一個類名，并對該類名設置一個類選擇器樣式。
將示例 2-10 的代碼做如下修改：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用實際的類實現(xiàn)偽類同等的樣式設置效果 </title>
<style>
.first-child {
background:#80C6BE;
}
</style>
</head>
<body>
<p class="first-child"> 妙味零基礎課程 </p>
<p> 妙味 JavaScript 課程 </p>
<p> 妙味移動端課程 </p>
</body>
</html>
上述代碼的運行效果和示例 2-10 完全等效?？梢?，偽類相當于在文檔中存在一個對應的類，這正是偽類之所以稱為“偽類”的原因。
偽元素選擇器
和偽類一樣，偽元素也用于向選擇器添加特殊的效果。偽元素之所有稱為“偽元素”，原因是偽元素只是在邏輯上存在但在文檔樹中卻并不存在的“幽靈”元素，即從效果上看，文檔樹中存在對應偽元素的元素，但實際上在代碼中并不存在這樣的元素。
使用偽元素選擇器設置樣式的語法如下：
選擇器 : 偽元素 {
屬性 1: 屬性值 1；
屬性 2: 屬性值 2；
...
}
語法說明：選擇器可以是任意類型的選擇器，當選擇器是類選擇器時，為了限定某類元素，也可以在類選擇器名前加上元素名，即將選擇器名寫成：元素名 . 類選擇器名，比如 div.second:first-line。
另外，偽元素前的“:”是偽元素選擇器的標識，不能省略。從上述語法來看，偽類和偽元素的寫法很類似，在 CSS3 中，為了區(qū)分兩者，規(guī)定偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。
目前，W3C 規(guī)定了表 2-2 所示的一些類型的偽元素。
下面將通過示例演示上述各個偽元素的使用方法。
【示例 2-11】使用偽元素 first-line 設置文本的首行的樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用偽元素 first-line 設置文本首行的樣式。</title>
<style>
/* 設置文本首行的背景顏色 */
div:first-line{
background:#80C6BE;
}
</style>
</head>
<body>
<div> 偽元素選擇器可以是任意類型的選擇器。當選擇器是類選擇器時，為了限定某類元素，也可以在類選擇器名前加上元素名，即將選擇器名寫成：元素名 . 類選擇器名，比如 div.second:first。</div>
</body>
</html>
上述代碼中的“div:first-line”是一個偽類選擇器，用于選擇 div 內(nèi)容中的首行。該選擇器設置了首行的背景顏色樣式，運行結果如圖 2-11 所示。
【示例 2-12】使用偽元素 first-letter 設置文本的第一個字符樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用偽元素 first-letter 設置文本的第一個字符樣式 </title>
<style>
/* 設置文本第一個字符的字號大小 */
div:first-letter{
font-size:36px;
}
</style>
</head>
<body>
<div> 偽元素選擇器可以是任意類型的選擇器。</div>
</body>
</html>
上述代碼中的”div:first-letter”是一個偽元素選擇器，用于選擇div 內(nèi)容中的第一個字符。該選擇器設置了第一個字符的字號大小，運行結果如圖 2-12 所示。
【示例 2-13】使用偽元素 before 在元素前面添加內(nèi)容并設置該內(nèi)容的樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>before 偽元素的使用 </title>
<style>
/* 在 div 前面添加內(nèi)容并設置該內(nèi)容的背景顏色 */
div:before{
content:" 這是使用 before 偽元素添加的內(nèi)容 "; /* 設置添加的內(nèi)容 */
background:#99F;
}
</style>
</head>
<body>
<div> 偽元素選擇器可以是任意類型的選擇器。</div>
</body>
</html>
上述代碼中的“div:before”是一個偽元素選擇器，用于在 div 內(nèi)容前面添加一串文本（文本內(nèi)容使用 content 屬性來添加），同時設置這些文本的背景色，運行結果如圖2-13 所示。
【示例 2-14】使用偽元素 after 在元素后面添加內(nèi)容并設置該內(nèi)容的樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>after 偽元素的使用 </title>
<style>
/* 在 div 后面添加內(nèi)容并設置該內(nèi)容的背景顏色 */
div:after {
content:" 這是使用 after 偽元素添加的內(nèi)容 "; /* 設置添加的內(nèi)容 */
background:#99F;
}
</style>
</head>
<body>
<div> 偽元素選擇器可以是任意類型的選擇器。
</div>
</body>
</html>
上述代碼中的“div:after”是一個偽元素選擇器，用于在 div 內(nèi)容后面添加一串文本（文本內(nèi)容使用 content 屬性來添加），同時設置這些文本的背景顏色，運行結果如圖2-14 所示。
和偽類可以使用具體的類來達到同等效果一樣，偽元素也可以使用具體的元素來達到同等效果。此時需要在代碼的相應位置添加一個元素，同時使用元素選擇器對該元素設置樣式。
下面以示例 2-12 為例，將示例2-12 的代碼修改如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用元素設置文本的第一個字符樣式 </title>
<style>
/* 添加元素選擇器樣式 */
span {
font-size:36px;
}
</style>
</head>
<body>
<div><span> 偽 </span> 元素選擇器可以是任意類型的選擇器。</div>
</body>
</html>
上述代碼的運行效果和示例 2-12 的運行效果完全一樣?？梢?，偽元素相當于在文檔中存在一個對應的元素，這正是偽元素之所以稱為“偽元素”的原因。
通用選擇器
通用選擇器又稱為通配符選擇器，使用通配符“*”表示，它可以選擇文檔中的所有元素。
使用通用選擇器設置樣式的語法如下：
*{
屬性 1: 屬性值 1；
屬性 2: 屬性值 2；
...
}
很多元素在不同的瀏覽器中的默認樣式是不一樣的，因此，為了兼容不同的瀏覽器，需要重置元素的默認樣式。最簡單的重置元素樣式的方法就是使用通用選擇器，其中最常用的是使用通用選擇器來重置文檔元素的內(nèi)、外邊距。
示例代碼如下：
/* 重置文檔所有元素的內(nèi)、外邊距為 0px*/
*{
margin:0px; /* 設置元素的四個方向的外邊距為 0px*/
padding:0px; /* 設置元素的四個方向的內(nèi)邊距為 0px*/
}
上述設置方式雖然簡單，但對性能影響比較大，所以實際應用中不建議使用通用選擇器來重置樣式。
到這里，我們已經(jīng)把基礎選擇器都介紹完畢了，下一節(jié)我們再來看看復合選擇器相關的內(nèi)容。
