類別選擇器

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

例如: .class{}(注意是點開頭的哦,這是類別選擇器的標誌,點後面是屬性名稱,大括號裡面就是具體的設定)

下面我們就來簡單舉例:

html 檔案:

<div class="div">
    php中文网
</div>

css 檔案:

.div{color: cadetblue;
}

#這樣就可以實現定制效果:

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

<h1 class="div">php中文網</h1>

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

h1.div{color: cadetblue;
}

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

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

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

<p class="p1">php中文网</p>
<p class="p2">php中文网</p>
<p class="p3">php中文网</p>

css 檔案沒一個選擇器修改一處設定,地一個顏色藍黑,第二個字體大小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中文网</p>

下面就是結果圖:

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