選擇器(selector)是CSS中很重要的概念，所有HTML語言中的標記樣式都是通過不同的CSS選擇器進行控制的。下文介紹了基本ＣＳＳ選擇器相關知識。

為了理解選擇器的概念，可以用“地圖”作為類比。在地圖上都可以看到一些“圖例”，比如河流用藍色的線表示，某公路用紅色的線表示，省會城市用黑色圓點表示，等等。本質上，這就是一種“內容”與“表現形式”對應關系。在網頁上，也同樣存在著這樣的對應關系，例如h1標題用藍色文字表示，h2標題用紅色文字表示。因此為了使CSS規則與HTML元素對應起來.就必須定義一套完整的規則，實現CSS對HTML的“選擇”。這就是叫做“選擇器”的原因。

在CSS中，有幾種不同類型的選擇，本節先來介紹“基本”選擇器。所謂“基本”，是相對於下一節中要介紹的“復合”選擇器而言的。也就是說”復合”選擇器是通過對基本選擇器進行組合而構成的的。

基本選擇器有標記選擇器，類別選擇器和ID選擇器3種，下面詳細介紹。

一、標記選擇器

一個HTML頁面由很多不同的標記組成，CSS標記選擇器用來聲明哪些標記采用哪種CSS樣式。因此，每一種HTML標記的名稱都可以作為相應的標記選擇器的名稱。例如，p選擇器就是用於聲明頁面中所有

標記的樣式風格。同樣可以通過h1選擇器來聲明頁面中所有的

標記的CSS風格，如下所示：

 

以上這段CSS代碼聲明了HTML頁而巾所有的

標記。文字的顏色都采用紅色，大小都為24px。每-個CSS選擇器都包含選擇器本身、屬性和值，其中屬性和值可以設置多個，從而實現對同一個標記聲明多種樣式風格，如上示例所示。

 

如果希望所有

標記不再采用紅色，而是藍色，這時僅僅需要將屬性color的值修改為blue即可全部生效。

 

注意：CSS語言對於所有屬性和值都有相對嚴格的要求，如果聲明的屬性在CSS規范中不存在，或者某個屬性的值不符合該屬性的要求，都不能使CSS語句失效。下面是一些典型的錯誤語句：

對於上面提到的這些錯誤，通常情況下可以直接利用CSS編輯器(如Dreamweaver或Expression　Web)的語法提示功能避免，但某些時候還需要查閱CSS手冊，或者直接登錄W3C的官方網站來查閱CSS的詳細規格說明。lodidance.com

二、類別選擇器

在上一小節中提到的標記選擇器一旦聲明，那麼頁面中所有的該標記都會相應地產生變化。例如當聲明了

標記為紅色時，頁面中所有的

標記都將顯示為紅色。但是如果希望其中的某一個

標記不是紅色，而是藍色，僅依靠標記選擇器是不夠的，還需要引入類別(　class)選擇器。

例如，當頁面中同時出現3個

標記時，如果想讓它們的顏色各不相同，就可以通過設置不同的class選擇器來實現。一個完整的案例如下所示，實例文件位於網頁CSS教程資源的“第1章\示例5.htm”。

其顯示效果如圖1所示。從圖中可以看到兩個

標記分別呈現出了不同的顏色和字體大小，而且任何一個class選擇器都適用於所有HTML標記，只需要用HTML標記的class屬性聲明即可，例如

標記同樣使用了.green這個類別。

 

圖1　類別選擇器示例

首先通過標記選擇器定義

標記的全局顯示方案，然後再通過一個class選擇器對需要突出的

標記進行單獨設置，這樣大大提高了代碼的編寫效率，其顯示效果如圖2所示。

圖2　兩種選擇器配合

在HTML的標記中，還可以同時給一個標記運用多個class類別選擇器，從而將兩個類別的樣式風格同時運用到一個標記中。這在實際制作網站時往往會很有用，可以適當減少代碼的長度，如下例所示，示例文件位於網頁CSS教程中“第1章\07，htm”。lodidance.com

顯示效果如圖3所示，可以看到使用第1種class的第2行顯示為藍色，而第3行則仍為黑色，但由於使用了.two，因此字體變大。第4行通過“class="ne　two"”將兩個樣式同時加入，得到藍色大字體。第1行和第5行沒有使用任何樣式，僅作為對比時的參考。

圖3　同時使用兩種CSS風格

三、ID選擇器

ID選擇器的使用方法與class選擇器基本相同;不同之處在於ID選擇器只能HTML頁面中使用一次，因此其針對性更強。在HTML的標記中只需要利用id屬性，就可以直接調用CSS中的ID選擇器。

下面舉一個實際案例，示例文件位於網頁CSS教程資源中”第1章\08.htm”。

顯示效果如圖4所示，第2行與第3行都顯示了CSS的方案。可以看出，在很多浏覽器下，ID選擇器可以用於多個標記，即每個標記定義的id不只是CSS可以調用，JavaScript等其他腳本語言同樣也可以調用。因為這個特性，所以不要將ID選擇器用於多個標記.否則會出現意想不到的錯誤。如果一個HTML中有兩個相同id的標記，那麼將會導致JavaScript在查找id時出錯，例如函數getElementByld()。

圖4　ID選擇器示例

正因為JavaScript等腳本語言也能凋用HTML中設置的id.所以ID選擇器一直被廣泛地使用。網站建設者在編寫CSS代碼時，應該養成良好的編寫習慣，一個id最多其能賦予一個HTML標記。

另外從圖4中還可以看到，最後一行沒有任何CSS樣式風格顯示，這意味著ID選擇器不支持像class選擇器那樣的多風格同時使朋，類似“id="one

以上就是精品學習提供的關於基本ＣＳＳ選擇器的內容，希望能夠帶給您幫助。