摘要：基本選擇器主要包括元素選擇器選擇器類選擇器偽類選擇器偽元素選擇器通用選擇器元素選擇器在標準中，元素選擇器又稱為類型選擇器。例如，元素選擇器就是聲明當前頁面中所有的元素的顯示效果。

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

基本選擇器主要包括：

元素選擇器

ID 選擇器

類選擇器

偽類選擇器

偽元素選擇器

通用選擇器

元素選擇器

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

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

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

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

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

 
 妙味公告 
 
 妙味課堂 
 
miaov 公告 
 
miaov 課堂 

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

ID 選擇器

從上一節的介紹中，我們知道，元素選擇器可以選擇某一類元素。很顯然，如果需要某一類元素中某個元素設置特定的樣式，比如，對示例 2-2 中第一個div元素設置不同樣式，此時使用元素選擇器將無滿足需要，針對這種情況，我們可以使用 ID 選擇器。

ID 選擇器的名稱為元素的 id 屬性值，它可以針對一個元素進行樣式設置，需注意的是 ID 名稱在一個 HTML 頁面中必須唯一，你可以理解為 ID 就像是一個人的身份證號一樣，不可重復。所以一個 ID 選擇器只允許設置一個元素的樣式。在設置前必須加上標識符“#”。

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

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

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

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

 
 妙味課堂 
 
 妙味課程 
 
 妙味講師 

上述代碼中有 3 個 div 元素，其中第 3 個 div 設置了 id 屬性，值為“teacher”。CSS 代碼通過匹配 id 屬性值，可知 ID 選擇器選中了第 3 個 div 元素，因而其設置的綠色文本顏色以及加粗樣式，只對第 3 個 div 元素有效，其他兩個 div 元素的樣式則保持默認效果。
示例 2-3 的運行結果如圖 2-5 所示。

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

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

 妙味課堂 
miaov 課程 
 妙味講師 

上述代碼中的 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 選擇器的問題。

     
 妙味公告 
     
 妙味課堂 
     
miaov 公告 
     
miaov 課堂 

示例 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 樣式。

      
 妙味公告 
      
 妙味課堂 
      
miaov 公告 
      
miaov 課堂 

上述代碼的運行結果和圖 2-7 完全相同。
在 2.3.2 小節中，我們知道，ID 選擇器可以在一組同類元素中選取某個元素，其實類選擇器同樣具有這個能力，但不同的是，類選擇器可一次性選取若干個元素。

例如：有三組 div 元素，它們的字體大小均為 26px，并且是加粗顯示，但其中前兩個 div 的字體是綠色，且字體是斜體，在這樣的需求下，可以結合元素選擇器和類選擇器來共同完成樣式設置，具體示例如下。

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

 妙味課程