4.2 基本選擇器

基礎選擇器是編寫CSS樣式經常用到的選擇器，它包括元素選擇器、通配選擇器、ID選擇器、class選擇器和群組選擇器。下面分別介紹它們。

4.2.1 元素選擇器

標簽選擇器又稱為標記選擇器，在W3C標準中，又稱為類型選擇器（type selector）。CSS標簽選擇器用來聲明html標簽采用哪種CSS樣式，也就是重新定義了html標簽。因此，每一個html標簽的名稱都可以作為相應的標簽選擇器的名稱。

例如，p選擇器就是用于聲明頁面中所有<p>標簽的樣式風格。同樣，可以通過h1選擇器來聲明頁面中所有的<h1>標簽的CSS樣式風格，具體代碼如下：

以上CSS代碼聲明了html頁面中所有<h1>標簽，文字的顏色都采用紅色，大小都為14px。

每一個CSS選擇器都包括選擇器、屬性和值，其中屬性和值可以為一個，也可以設置多個，從而實現對同一個標簽聲明多種樣式風格的目的，如圖4-1所示。

圖4-1 標簽選擇器的結構

在這種格式中，既可以聲明一個屬性和值，也可以聲明多個屬性和值，根據具體情況而定。當然，還有另外一種常用的聲明格式，如圖4-2所示。

圖4-2 標簽選擇器聲明格式

在這種格式中，每一個聲明都不帶分號，而是在兩個聲明之間用分號隔開。同樣，即可以聲明一個屬性和值，也可以聲明多個屬性和值。

注意：CSS對于所有的屬性和值都有相對嚴格的要求。如果聲明的屬性或值不符合該屬性的要求，則不能使該CSS語句生效。

4.2.2 通配選擇器

通配選擇器用一個“*”表示。單獨使用時，這個選擇器可以與文檔中的任何元素匹配，就像一個通配符。如讓頁面上的所有文本都為紅色，代碼如下：

      *{color:red;}

當然也可以選擇某個元素下的所有元素。在與其他選擇器結合使用時，通配選擇器可以對特定元素的所有后代應用樣式。如為div元素的所有后代添加一個紅色背景，代碼如下：

      div *{background: red;}

雖然通配選擇器的功能強大，但是出于效率考慮，盡量少使用它。在各個瀏覽器中，每個元素上的默認邊距都不一致，為了保證頁面能夠兼容多種瀏覽器，通常在Reset樣式文件中，使用通配選擇器進行重置，來覆蓋瀏覽器的默認規則，代碼如下：

      * { margin: 0; padding: 0; }

4.2.3 ID選擇器

ID選擇器允許以一種獨立于文檔元素的方式來指定樣式，在某些方面，ID選擇器類似于類選擇器，不過也有一些重要差別。首先，ID選擇器前面有一個#號，如圖4-3所示。

圖4-3 ID選擇器結構示意圖

例如：下面的兩個ID選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

      #red {color:red;}
      #green {color:green;}

下面的HTML代碼中，id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。

      <p id="red">這個段落是紅色。</p>
      <p id="green">這個段落是綠色。</p>

注意：id屬性只能在每個HTML文檔中出現一次。

【例4-1】（實例文件：ch04\Chap4.1.html）ID選擇器。

相關的代碼實例請參考Chap4.1.html文件，在IE瀏覽器中運行的結果如圖4-4所示。可以看到標題以藍色字體顯示，大小為20px，段落內容以紅色字體顯示，大小為22px。

圖4-4 ID選擇器應用實例

4.2.4 class選擇器

類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結合使用，常用語法格式如下：

      .classValue {property:value}

classValue是選擇器的名稱，具體名稱由CSS制定者自己命名。【例4-2】（實例文件：ch04\Chap4.2.html）class選擇器。

相關的代碼實例請參考Chap4.2.html文件，在IE瀏覽器中運行的結果如圖4-5所示。

圖4-5 類別選擇器應用實例

4.2.5 群組選擇器

群組選擇器實際上是對CSS的一種簡化寫法，只不過把相同定義的不同選擇器放在一起，用“,”分開，這樣樣式只需要編寫一遍節，省了很多的代碼。假果我們想要給<p>和<div>元素同時設置黃色背景，就可以使用群組選擇器。

【例4-3】（實例文件：ch04\Chap4.3.html）群組選擇器。

相關的代碼實例請參考Chap4.3.html文件，在IE瀏覽器中運行的結果如圖4-6所示。

圖4-6 群組選擇器