本小節(jié)向大家介紹一下CSS布局中元素的分類與標(biāo)識(shí)，主要包括用class對(duì)元素進(jìn)行分類，利用id標(biāo)識(shí)元素兩大部分內(nèi)容，相信通過本文的學(xué)習(xí)你對(duì)class和id屬性的用法會(huì)有深刻的認(rèn)識(shí)。

解析CSS布局中元素的分類與標(biāo)識(shí)（class和id）

有時(shí)你希望對(duì)特定元素或者特定一組元素應(yīng)用特殊的樣式。在這一課，我們將深入學(xué)習(xí)如何利用class和id來為所選元素指定屬性。

如何實(shí)現(xiàn)為網(wǎng)站上許多標(biāo)題中的某一個(gè)單獨(dú)應(yīng)用顏色？如何實(shí)現(xiàn)把網(wǎng)站上的鏈接分為不同的類，并對(duì)各類鏈接分別應(yīng)用不同的樣式？這只是本課將解決的諸多問題中的最具代表性的兩個(gè)問題。

用class對(duì)元素進(jìn)行分類

比方說，我們有兩個(gè)由鏈接組成的列表，它們分別是用于制造白葡萄酒和紅葡萄酒的葡萄。其HTML代碼如下：

以下是代碼片段：

<p>制造白葡萄酒的葡萄：</p> 
<ul> 
<li><ahrefahref="ri.htm">雷司令（Riesling）</a></li> 
<li><ahrefahref="ch.htm">夏敦埃（Chardonnay）</a></li> 
<li><ahrefahref="pb.htm">白比諾（PinotBlanc）</a></li> 
</ul> 
 
<p>制造紅葡萄酒的葡萄：</p> 
<ul> 
<li><ahrefahref="cs.htm">卡百內(nèi)索維農(nóng)
（CabernetSauvignon）</a></li> 
<li><ahrefahref="me.htm">墨爾樂（Merlot）</a></li> 
<li><ahrefahref="pn.htm">黑比諾（PinotNoir）</a></li> 
</ul> 
 

現(xiàn)在，我們希望白葡萄酒的鏈接全部顯示為黃色，紅葡萄酒的鏈接全部顯示為紅色，其余的鏈接顯示為缺省的蘭色。

為了實(shí)現(xiàn)這一要求，我們將鏈接分為兩類。對(duì)鏈接的分類是通過為鏈接設(shè)置HTML屬性class實(shí)現(xiàn)的。

參加如下代碼：

以下是代碼片段：

<p>制造白葡萄酒的葡萄：</p> 
<ul> 
<li><ahrefahref="ri.htm"class="whitewine">雷司令（Riesling）</a></li> 
<li><ahrefahref="ch.htm"class="whitewine">夏敦埃（Chardonnay）</a></li> 
<li><ahrefahref="pb.htm"class="whitewine">白比諾（PinotBlanc）</a></li> 
</ul> 
 
<p>制造紅葡萄酒的葡萄：</p> 
<ul> 
<li><ahrefahref="cs.htm"class="redwine">卡百內(nèi)索維農(nóng)
（CabernetSauvignon）</a></li> 
<li><ahrefahref="me.htm"class="redwine">墨爾樂（Merlot）</a></li> 
<li><ahrefahref="pn.htm"class="redwine">黑比諾（PinotNoir）</a></li> 
</ul> 
 

 然后，我們就可以為白葡萄酒和紅葡萄酒的鏈接分別應(yīng)用不同的風(fēng)格了。

以下是代碼片段： 

a{  
color:blue;  
}  
a.whitewine{  
color:#FFBB00;  
}  
a.redwine{  
color:#800000;  
}  
 

如上例所示，你可以通過在樣式表里利用.classname來為屬于某一類的元素定義CSS屬性。#p#

利用id標(biāo)識(shí)元素

除了可以對(duì)元素進(jìn)行分類以外，你還可以標(biāo)識(shí)單個(gè)元素。這是通過HTML屬性id實(shí)現(xiàn)的。

HTML屬性id的特別之處在于，在同一HTML文檔中不能有兩個(gè)具有相同id值的元素。文檔中的每個(gè)id值都必須是唯一的。在其他情況下，你應(yīng)該使用class屬性。下面，我們來看一個(gè)使用id屬性的例子：

以下是代碼片段：

<h1>第1章</h1> 
...  
<H5>第1.1節(jié)</H5> 
...  
<H5>第1.2節(jié)</H5> 
...  
<h1>第2章</h1> 
...  
<H5>第2.1節(jié)</H5> 
...  
<H5>第2.1.1小節(jié)</H5> 
...  
 

 上例是一個(gè)文章的各章節(jié)的標(biāo)題。我們自然可以為其中每一章節(jié)指定一個(gè)id（如下）：

以下是代碼片段：

<h1idh1id="c1">第1章</h1> 
...  
<H5idH5id="c1-1">第1.1節(jié)</H5> 
...  
<H5idH5id="c1-2">第1.2節(jié)</H5> 
...  
<h1idh1id="c2">第2章</h1> 
...  
<H5idH5id="c2-1">第2.1節(jié)</H5> 
...  
<h3idh3id="c2-1-2">第2.1.1節(jié)</h3> 
...  
 

 假如我們要求第1.2節(jié)顯示為紅色，那么CSS可以這樣寫：

以下是代碼片段： 

#c1-2{  
color:red;  
}  
 

如上例所示，你可以在樣式表里通過#id為特定元素定義CSS屬性。
 

【編輯推薦】

1. DIV CSS中id與class使用用原則與技巧
2. 五大CSS3新技術(shù)用法指導(dǎo)
3. CSS中border和clear兩大屬性用法揭秘
4. 實(shí)例解析CSS DIV絕對(duì)定位與固定定位用法
5. 解讀DIV CSS網(wǎng)頁布局中CSS無效十個(gè)原因