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

例如: .class{}(注意是點(diǎn)開(kāi)頭的哦,這是類(lè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ò),將類(lèi)選擇器結(jié)合元素選擇器來(lái)使用.下面再添加一個(gè):

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

下面我們將 css 文件如下修改:

h1.div{color: cadetblue;
}

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

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

下面我們要講的就是多類(lèi)選擇器:.class.class{} 這個(gè)在先前我們沒(méi)有接觸過(guò).下面我們就來(lái)邊寫(xiě)邊感受: 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)使用多類(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 字體大小的修改,還有自己斜體的修改.這就是多類(lèi)選擇器的應(yīng)用.