CSS類別選擇器

在實際應用中，不會像上節(jié)中所有段落都要是紅色的，如果僅希望一部分段落是紅色的，另一部分段落是藍色的，該怎么做呢？這就需要用到類別選擇器。用戶可以自由定義類別選擇器名稱，但也必須遵守CSS的3個要素。下面的例子就通過類別選擇器更改第3和第4個P標簽文字為藍色。

（1）新建實例文件02-02.html，代碼如下，其中選擇器P定義了所有段落顯示樣式，選擇器blue定義了部分字體顯示樣式，即顯示顏色為藍色。

（2）按【F12】鍵運行，結果如下圖所示：

通過本例我們可以看到，類別選擇器與標記選擇器在定義上幾乎是一樣的，僅需要自己定義一個名稱，在需要使用的地方通過“class=類別選擇器名稱”就能靈活使用。

類別選擇器還有一個特定，就是它可以用在不同標簽元素上，下面的例子就是類別選擇器分別作用于P標簽和h標簽上。h標簽是HTML用于定義標題樣式的標記。

（1）新建文件02-03.html，輸入如下代碼，創(chuàng)建一個blue類別選擇器，定義了字體顯示大小、字體顏色和字體加粗。在下面的HTML頁面中，段落和標題都引用了這個樣式，即表示標題和段落顯示同一個樣式。

（2）按【F12】鍵運行，結果如下圖所示：

類別選擇器的使用是很靈活的，可以在一個標記中使用多個類別選擇器，達到復合使用的效果，實例如下：

（1）新建02-04.html，輸入如下代碼，這里創(chuàng)建了兩個類別選擇器，其中red選擇器定義了字體顏色，big選擇器定義了字體大小。在HTML頁面中，第三個段落同時使用了red和big兩個選擇器。

（2）按【F12】鍵運行，結果如下圖所示：

從運行結果中我們可以看到，在第一行沒有使用任何類別選擇器，第二行使用了red選擇器，文字顏色變?yōu)榧t色，第三行使用big選擇器，改變了字體的大小，第四行同時使用red和big選擇器，文字的顏色和字體的大小同時發(fā)生了改變。

注意：本例僅同時使用顏色和大小兩種類別選擇器，實際開發(fā)中可以同時使用多個選擇權器。