CSS類別選擇器

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

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

（2）按【F12】鍵運(yùn)行，結(jié)果如下圖所示：

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

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

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

（2）按【F12】鍵運(yùn)行，結(jié)果如下圖所示：

類別選擇器的使用是很靈活的，可以在一個(gè)標(biāo)記中使用多個(gè)類別選擇器，達(dá)到復(fù)合使用的效果，實(shí)例如下：

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

（2）按【F12】鍵運(yùn)行，結(jié)果如下圖所示：

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

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