即學即用，輕鬆搞定這些選擇器！（下）

時間 2019-11-09

標籤即用輕鬆搞定這些選擇器简体版

原文原文鏈接

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

僞類選擇器瀏覽器

僞類是指邏輯上存在、但文檔樹中並不存在的「幽靈」分類，一般用於給元素某些特定狀態添加樣式。僞類典型的應用就是爲超連接添加未訪問、訪問事後、懸停和活動四種連接狀態。從效果上看，存在僞類對應的類名，但實際上並無這個類名，所以稱之爲僞類。性能

使用僞類選擇器設置樣式的語法以下：spa

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

語法說明：選擇器能夠是任意類型的選擇器，僞類前的「:」是僞類選擇器的標識，不能省略。表 2-1 列出了一些 W3C 規定的僞類。code

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

:active、:hover、:link 和 :visited 主要用於描述超連接的四種狀態，咱們將在介紹超連接時演示這些僞類的用法；blog

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

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

<!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>」是一個段落標籤對，用於建立一個段落。有關段落標籤的內容請參見第 5 章。代碼中的「p:first-child」是一個僞類選擇器，表示選擇文檔樹中的每層元素的第一個子元素，且其類型爲「p」。最終的結果是第一個 p 被設置爲背景顏色，運行結果如圖 2-10 所示。文檔

示例 2-10 也能夠不使用僞類而使用實際的類來達到一樣的樣式設置效果。爲了使用實際的類來達到示例 2-10 的效果，須要在第一個段落標籤中添加一個類名，並對該類名設置一個類選擇器樣式。

將示例 2-10 的代碼作以下修改：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用實際的類實現僞類同等的樣式設置效果 </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 中，爲了區分二者，規定僞類用一個冒號來表示，而僞元素則用兩個冒號來表示。

目前，W3C 規定了表 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 內容中的首行。該選擇器設置了首行的背景顏色樣式，運行結果如圖 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 內容中的第一個字符。該選擇器設置了第一個字符的字號大小，運行結果如圖 2-12 所示。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>before 僞元素的使用 </title>
<style>
/* 在 div 前面添加內容並設置該內容的背景顏色 */
div:before{ 
	content:" 這是使用 before 僞元素添加的內容 "; /* 設置添加的內容 */
	background:#99F;
} 
</style>
</head>
<body>
 <div> 僞元素選擇器能夠是任意類型的選擇器。</div>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>after 僞元素的使用 </title>
<style>
/* 在 div 後面添加內容並設置該內容的背景顏色 */
div:after { 
	content:" 這是使用 after 僞元素添加的內容 "; /* 設置添加的內容 */
	background:#99F;
} 
</style>
</head>
<body>
	<div> 僞元素選擇器能夠是任意類型的選擇器。
	</div>
</body>
</html>

上述代碼中的「div:after」是一個僞元素選擇器，用於在 div 內容後面添加一串文本（文本內容使用 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；
	 ...
	}

不少元素在不一樣的瀏覽器中的默認樣式是不同的，所以，爲了兼容不一樣的瀏覽器，須要重置元素的默認樣式。最簡單的重置元素樣式的方法就是使用通用選擇器，其中最經常使用的是使用通用選擇器來重置文檔元素的內、外邊距。

示例代碼以下：

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

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。