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

時間 2019-11-07

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

原文原文鏈接

所謂基本選擇器是指選擇器的名稱前面沒有其餘選擇器，即在組成上，基本選擇器是單一名稱。html

基本選擇器主要包括：瀏覽器

元素選擇器
ID 選擇器
類選擇器
僞類選擇器
僞元素選擇器
通用選擇器

元素選擇器字體

在 W3C 標準中，元素選擇器又稱爲類型選擇器。使用元素選擇器設置樣式的語法以下：3d

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

語法說明：元素選擇器從新定義了 HTML 標籤的顯示效果，網頁中的任何一個 HTML 標籤均可以做爲相應的元素選擇器的名稱，設置的樣式對整個網頁的該類元素有效。code

例如，div 元素選擇器就是聲明當前頁面中全部的 div 元素的顯示效果。元素選擇器樣式應用是經過匹配 HTML 文檔元素來實現的。htm

【示例 2-2】元素選擇器使用。blog

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 元素選擇器的使用 </title>
<style>
div { /* 使用 div 標籤做爲元素選擇器 */
	 font-size:32px; /* 設置字體大小樣式 */
	 color:red; /* 設置字體顏色樣式 */
}
</style>
</head>
<body>
 <div> 妙味公告 </div>
 <div> 妙味課堂 </div>
 <div>miaov 公告 </div>
 <div>miaov 課堂 </div>
</body>
</html>

上述 CSS 代碼使用 div 做爲元素選擇器，這樣就選中了頁面上全部的 div 元素，於是在大括號內設置的任何樣式，對頁面中全部 div 元素都有效。運行結果如圖 2-4 所示。utf-8

ID 選擇器開發

從上一節的介紹中，咱們知道，元素選擇器能夠選擇某一類元素。很顯然，若是須要某一類元素中某個元素設置特定的樣式，好比，對示例 2-2 中第一個div元素設置不一樣樣式，此時使用元素選擇器將無知足須要，針對這種狀況，咱們可使用 ID 選擇器。文檔

ID 選擇器的名稱爲元素的 id 屬性值，它能夠針對一個元素進行樣式設置，需注意的是 ID 名稱在一個 HTML 頁面中必須惟一，你能夠理解爲 ID 就像是一我的的身份證號同樣，不可重複。因此一個 ID 選擇器只容許設置一個元素的樣式。在設置前必須加上標識符「#」。

使用 ID 選擇器設置樣式的語法以下：

#ID 選擇器 {
屬性 1: 屬性值 1；
屬性 2: 屬性值 2；
 ... 
}

語法說明：ID 選擇器名稱的第一個字符不能使用數字；ID 選擇器名不容許有空格，選擇器名前的「#」是 ID 選擇器的標識，不能省略；另外，ID 選擇器名區分大小寫，應用時應正確書寫。

【示例 2-3】ID 選擇器使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> ID 選擇器的使用 </title>
<style>
#teacher{ /* 使用 ID 選擇器 */
 color:green; /* 設置文本顏色樣式 */
 font-weight:bold; /* 設置文本加粗樣式 */
}
</style>
<body>
 <div> 妙味課堂 </div>
 <div> 妙味課程 </div>
 <div id="teacher"> 妙味講師 </div>
</body>
</html>

上述代碼中有 3 個 div 元素，其中第 3 個 div 設置了 id 屬性，值爲「teacher」。CSS 代碼經過匹配 id 屬性值，可知 ID 選擇器選中了第 3 個 div 元素，於是其設置的綠色文本顏色以及加粗樣式，只對第 3 個 div 元素有效，其餘兩個 div 元素的樣式則保持默認效果。

示例 2-3 的運行結果如圖 2-5 所示。

還有一些狀況也很常見，例如咱們但願有一列 div 具有公共樣式，好比統一的背景、統一的大小等，但咱們但願其中一個元素樣式略有不一樣，但願針對這個元素設置特殊樣式，此時咱們能夠結合元素選擇器和 ID 選擇器來共同設置樣式：元素選擇器設置公共樣式，ID 選擇器設置特殊樣式。具體示例以下。

【示例 2-4】結合元素選擇器和 ID 選擇器共同設置元素樣式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 結合元素選擇器和 ID 選擇器共同設置元素樣式 </title>
<style>
/* 使用元素選擇器設置元素的下邊距、字體加粗、字號大小以及背景顏色公共樣式 */
div{
	margin-bottom:6px; /* 設置下邊距 */
	background:#CFF; /* 設置背ఀ顏色 */
	font-weight:bold; /* 設置文本加粗 */
	font-size:26px; /* 設置字號大小 */
}
/* 使用 ID 選擇器設置元素的文本顏色特殊樣式 */
#teacher{ 
 color:green; /* 設置文本顏色 */
}
</style>
</head>
<body>
<div> 妙味課堂 </div>
<div>miaov 課程 </div>
<div id="teacher"> 妙味講師 </div>
</body>
</html>

上述代碼中的 3 個 div 元素內容都須要加粗並以 26px 字號顯示，同時，都包含背景顏色，但第 3 個 div 元素內容的文本顏色要求爲綠色。可見，三個 div 存在公共樣式，同時，第三個 div 存在特殊樣式。對 div 的公共樣式可以使用 div 元素選擇器進行設置，而第 3個 div 的特殊樣式則使用 ID 選擇器進行設置，示例 2-4 在瀏覽器中的最終運行結果如圖 2-6 所示。

因爲 ID 名不可重複，因此 ID 選擇器只能選擇單個元素。ID 選擇器的這個特性在某些狀況下，會給咱們帶來不便。好比咱們使用 ID 選擇器對示例 2-2 中的 4 個 div 元素設置樣式，要求是其中第 1 個和第 3 個 div 的文本顏色爲紅色，第 2 個和第 4 個 div 的文本顏色爲藍色。使用 ID 選擇器就須要對各個 div 都設置好 id 屬性，將示例 2-2 的代碼修改以下。

【示例 2-5】頁面存在多個元素具備相一樣式時使用 ID 選擇器的問題。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 頁面存在多個元素具備相一樣式時使用 ID 選擇器的問題 </title>
<style>
#notice1{
	color:red;
}
#course1{
	color: blue;
}
#notice2{
	color:red;
}
#course2{
	color:blue;
}
</style>
</head>
<body>
	 <div id="notice1"> 妙味公告 </div>
	 <div id="course1"> 妙味課堂 </div>
	 <div id="notice2">miaov 公告 </div>
	 <div id="course2">miaov 課堂 </div>
</body>
</html>

示例 2-5 的 CSS 代碼中，雖然第 1 個和第 3 個 div、第 2 個和第 4 個 div 的樣式徹底相同，但因爲使用 ID 選擇器，相一樣式也要使用不一樣 ID 選擇器去定義（由於 ID 名必須惟一）。可見，針對多個元素具備相一樣式的狀況，使用 ID 選擇器是不可取的。此時是否可使用元素選擇器呢？很顯然，這種狀況下，元素選擇器更不可取，由於元素選擇器會讓全部同類元素使用同一種樣式。

有關類選擇器的介紹請參見下一小節。示例 2-5 的運行結果如圖 2-7 所示。

類選擇器

在上一小節最後，咱們說示例 2-5 中的樣式設置使用類選擇器最合適。那麼什麼是類選擇器呢？其實，類選擇器也是一種基本選擇器，它和 ID 選擇器同樣，能夠容許以一種獨立於文檔元素的方式來指定樣式。與 ID 選擇器不一樣的是，類選擇器的名稱爲元素的 class 屬性值，一個類名在 HTML 頁面中能夠重複出現屢次，此外，類選擇器名前面必須加上「.」做爲標識符。

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

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

語法說明：類選擇器名稱的第一個字符不能使用數字；類選擇器名前的「.」是類選擇器的標識，不能省略；另外，類選擇器的命名是區分大小的，應用時應正確書寫。

下面使用類選擇器設置示例 2-5 的 div 樣式。你們能夠看到，第 1 個和第 2 個 div 的 class 屬性值同樣，第 3 個和第 4 個 div 的 class 屬性值同樣。

具體代碼以下。

【示例 2-6】使用類選擇器設置示例 2-5 的 div 樣式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 類選擇器的使用 </title>
<style>
.red{
	  color:red;
}
.blue{
	  color:blue;
}
</style>
</head>
<body>
	  <div class="red"> 妙味公告 </div>
	  <div class="red"> 妙味課堂 </div>
	  <div class="blue">miaov 公告 </div>
	  <div class="blue">miaov 課堂 </div>
</body>
</html>

上述代碼的運行結果和圖 2-7 徹底相同。

在 2.3.2 小節中，咱們知道，ID 選擇器能夠在一組同類元素中選取某個元素，其實類選擇器一樣具備這個能力，但不一樣的是，類選擇器可一次性選取若干個元素。例如：有三組 div 元素，它們的字體大小均爲 26px，而且是加粗顯示，但其中前兩個 div 的字體是綠色，且字體是斜體，在這樣的需求下，能夠結合元素選擇器和類選擇器來共同完成樣式設置，具體示例以下。

【示例 2-7】結合元素選擇器和類選擇器共同設置元素樣式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 結合元素選擇器和類選擇器共同設置元素樣式 </title>
<style>
/* 使用元素選擇器設置元素的字體加粗以及字號大小公共樣式 */
div{ 
	font-weight:bold; 
	font-size:26px;
} 
/* 使用類選擇器設置元素的字體格式和文本顏色特殊樣式 */
.miaov{
	color:green;
	font-style:italic;
}
</style>
</head>
<body>
<divclass="miaov"> 妙味課程 </div>
<divclass="miaov"> 妙味課堂 </div>
<div> 學員做品 </div>
</body>
</html>

上述代碼在瀏覽器的運行結果如圖 2-8 所示。

示例 2-5 和示例 2-7 雖然體現了元素選擇器和 ID 選擇器、類選擇器的組合應用場景，但在真實的項目開發中，咱們一般不會給 div 作這樣的全局樣式設置，由於這樣會干擾到頁面其餘 div 元素。真實的項目開發中，更常見的作法是在一個 class 屬性中使用多個類名來區分樣式。

先來看看多個 class 屬性值的設置。class 屬性值中除了包含一個類，還能夠包含多個類，即一個詞列表（類名列表），各個詞之間使用空格分隔。好比：<div class="miaov green"></div>，這裏面的「miaov green」就是不一樣的類名，在一個 class 屬性內，不只能夠設置兩個，還能夠設置多個，根據實際開發須要而定。所以，圖 2-8 的代碼實現，能夠改寫成以下示例。

【示例 2-8】設置多個類名來共同設置元素樣式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用多個類名共同設置元素樣式 </title>
<style>
/* 使用元素選擇器設置 miaov 類的字體加粗以及字號大小公共樣式 */
.miaov { 
	font-weight:bold; 
	font-size:26px;
} 
/* 使用 green 類選擇器設置元素的字體格式和文本顏色特殊樣式 */
.green {
	color:green;
	font-style:italic;
}
</style>
</head>
<body>
	<divclass="miaov green"> 妙味課程 </div>
	<div class="miaov green"> 妙味課堂 </div>
	<div class="miaov"> 學員做品 </div>
</body>
</html>

上述代碼在瀏覽器中的運行結果和圖 2-8 所示一致，但因爲使用到多個類名，頁面中再添加其餘 div 元素，也不會受到干擾了。

此外，還有一種工做中不常見的選擇器——多類選擇器，爲保證知識點的完整，在本書中對其作簡單介紹，它的設置方式依然是 class="miaov green hot"，但在定義 CSS 選擇器時，須要以 .miaov.green.hot 做爲選擇器名稱，這種選擇器稱之爲多類選擇器。

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

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

語法說明：. 類選擇器 1. 類選擇器 2. 類選擇器 3……各個類選擇器之間不能有空格。多類選擇器只能選擇包含這些類名的元素（類名的順序不限）。若是多類選擇器包含了類名列表中沒有的類名，匹配就會失敗。

【示例 2-9】使用多類選擇器來進行元素樣式設置。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用多類選擇器來進行元素樣式設置 </title>
<style>
/* 使用多類選擇器進行樣式設置 */
.miaov.green.hot { 
	 font-weight:bold; 
	 font-size:26px;
}
</style>
</head>
<body>
<div class="miaov green hot"> 妙味課程 </div>
</body>
</html>

以上代碼在瀏覽器中的運行結果如圖 2-9 所示。

當設置多類選擇器時，必須正確寫成 .miaov.green.hot 才能實現，寫成 .miaov.green 也能夠正確設置。但若是寫成：.miaov.green.abc，即便樣式表中存在 .abc 這個類，也會致使樣式設置無效。

本文就到這裏啦，下節咱們繼續介紹僞類選擇器、僞元素選擇器、通用選擇器，你們能夠關注起來。