類選擇器允許以一種獨立與文檔元素的方式來制定樣式

例如: .class{}(注意是點開頭的哦,這是類選擇器的標志,點后面是屬性名,大括號里面就是具體的設(shè)置)

下面我們就來簡單舉例:

html 文件:

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

css 文件:

.div{color: cadetblue;
}

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

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

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

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

h1.div{color: cadetblue;
}

這樣在類選擇器前面加了元素描述以后,這個.div 就只會對 h1 起作用.

下面我們來看看具體的效果:

下面我們要講的就是多類選擇器:.class.class{} 這個在先前我們沒有接觸過.下面我們就來邊寫邊感受: html 文件列出幾個 p 字段,到時好比較:

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

css 文件沒一個選擇器修改一處設(shè)置,地一個顏色藍黑,第二個字體大小 20px,第三個字體樣式斜體:

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

下面就是效果截圖:

下面我們就來使用多類選擇器:

這里就只需要將 css 文件中 p3 改為 .p1.p2 就好,另外在 html 引用時將第三個 p 標簽 class 進行修改: css:

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

html:

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

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

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