類別選擇器允許以一種獨(dú)立與文檔元素的方式來(lái)製定樣式

例如: .class{}(注意是點(diǎn)開(kāi)頭的哦,這是類別選擇器的標(biāo)誌,點(diǎn)後面是屬性名稱,大括號(hào)裡面就是具體的設(shè)定)

下面我們就來(lái)簡(jiǎn)單舉例:

html 檔案:

<div class="div">
    php中文網(wǎng)
</div>

css 檔案:

.div{color: cadetblue;
}

#這樣就可以實(shí)現(xiàn)定制效果:

前面我們還接觸過(guò),將類別選擇器結(jié)合元素選擇器來(lái)使用.下面再添加一個(gè):

<h1 class="div">php中文網(wǎng)</h1>

下面我們將css 檔案如下修改:

h1.div{color: cadetblue;
}

這樣在類別選擇器前面加了元素描述以後,這個(gè).div 就只會(huì)對(duì)h1 起作用.

下面我們來(lái)看看具體的效果:

下面我們要講的就是多類別選擇器:.class.class{} 這個(gè)在先前我們沒(méi)有接觸過(guò).下面我們就來(lái)邊寫邊感受: html 檔案列出幾個(gè)p 欄位,到時(shí)好比較:

<p class="p1">php中文網(wǎng)</p>
<p class="p2">php中文網(wǎng)</p>
<p class="p3">php中文網(wǎng)</p>

css 檔案沒(méi)一個(gè)選擇器修改一處設(shè)定,地一個(gè)顏色藍(lán)黑,第二個(gè)字體大小20px,第三個(gè)字體樣式斜體:

.p1{    color: cadetblue;
}.p2{    font-size: 20px;
}.p3{    font-style: italic;
}

下面就是效果截圖:

下面我們就來(lái)使用多類別選擇器:

這裡就只需要將css 檔案中p3 改為.p1.p2 就好,另外在html 引用時(shí)將第三個(gè)p 標(biāo)籤class 進(jìn)行修改: css:

.p1.p2{    font-style: italic;
}

html:

<p class="p1 p2">php中文網(wǎng)</p>

下面就是結(jié)果圖:

這裡我們看出,第三個(gè)段即有p1 顏色的修改,也有p2 字體大小的修改,還有自己斜體的修改.這就是多類別選擇器的應(yīng)用.