CSS布局中元素的分類(class)和標識(id)

本小節向大家介紹一下CSS布局中元素的分類與標識，主要包括用class對元素進行分類，利用id標識元素兩大部分內容，相信通過本文的學習你對class和id屬性的用法會有深刻的認識。

解析CSS布局中元素的分類與標識（class和id）

有時你希望對特定元素或者特定一組元素應用特殊的樣式。在這一課，我們將深入學習如何利用class和id來為所選元素指定屬性。

如何實現為網站上許多標題中的某一個單獨應用顏色？如何實現把網站上的連結分為不同的類，並對各類連結分別應用不同的樣式？這只是本課將解決的諸多問題中的最具代表性的兩個問題。

用class對元素進行分類

比方說，我們有兩個由連結組成的列表，它們分別是用於製造白葡萄酒和紅葡萄酒的葡萄。其HTML代碼如下：

以下是代碼片段：

1. <p>製造白葡萄酒的葡萄：</p> 
2. <ul> 
3. <li><ahrefahref="ri.htm">雷司令（Riesling）</a></li> 
4. <li><ahrefahref="ch.htm">夏敦埃（Chardonnay）</a></li> 
5. <li><ahrefahref="pb.htm">白比諾（PinotBlanc）</a></li> 
6. </ul> 
7.  
8. <p>製造紅葡萄酒的葡萄：</p> 
9. <ul> 
10. <li><ahrefahref="cs.htm">卡百內索維農
11. （CabernetSauvignon）</a></li> 
12. <li><ahrefahref="me.htm">墨爾樂（Merlot）</a></li> 
13. <li><ahrefahref="pn.htm">黑比諾（PinotNoir）</a></li> 
14. </ul> 
15.  

現在，我們希望白葡萄酒的連結全部顯示為黃色，紅葡萄酒的連結全部顯示為紅色，其餘的連結顯示為預設的蘭色。

為了實現這一要求，我們將連結分為兩類。對連結的分類是通過為連結設置HTML屬性class實現的。

參加如下代碼：

以下是代碼片段：

1. <p>製造白葡萄酒的葡萄：</p> 
2. <ul> 
3. <li><ahrefahref="ri.htm"class="whitewine">雷司令（Riesling）</a></li> 
4. <li><ahrefahref="ch.htm"class="whitewine">夏敦埃（Chardonnay）</a></li> 
5. <li><ahrefahref="pb.htm"class="whitewine">白比諾（PinotBlanc）</a></li> 
6. </ul> 
7.  
8. <p>製造紅葡萄酒的葡萄：</p> 
9. <ul> 
10. <li><ahrefahref="cs.htm"class="redwine">卡百內索維農
11. （CabernetSauvignon）</a></li> 
12. <li><ahrefahref="me.htm"class="redwine">墨爾樂（Merlot）</a></li> 
13. <li><ahrefahref="pn.htm"class="redwine">黑比諾（PinotNoir）</a></li> 
14. </ul> 
15.  

然後，我們就可以為白葡萄酒和紅葡萄酒的連結分別應用不同的風格了。

以下是代碼片段： 

1. a{  
2. color:blue;  
3. }  
4. a.whitewine{  
5. color:#FFBB00;  
6. }  
7. a.redwine{  
8. color:#800000;  
9. }  
10.  

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

利用id標識元素

除了可以對元素進行分類以外，你還可以標識單個元素。這是通過HTML屬性id實現的。

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

以下是代碼片段：

1. <h1>第1章</h1> 
2. ...  
3. <H5>第1.1節</H5> 
4. ...  
5. <H5>第1.2節</H5> 
6. ...  
7. <h1>第2章</h1> 
8. ...  
9. <H5>第2.1節</H5> 
10. ...  
11. <H5>第2.1.1小節</H5> 
12. ...  
13.  

上例是一個文章的各章節的標題。我們自然可以為其中每一章節指定一個id（如下）：

以下是代碼片段：

1. <h1idh1id="c1">第1章</h1> 
2. ...  
3. <H5idH5id="c1-1">第1.1節</H5> 
4. ...  
5. <H5idH5id="c1-2">第1.2節</H5> 
6. ...  
7. <h1idh1id="c2">第2章</h1> 
8. ...  
9. <H5idH5id="c2-1">第2.1節</H5> 
10. ...  
11. <h3idh3id="c2-1-2">第2.1.1節</h3> 
12. ...  
13.  

假如我們要求第1.2節顯示為紅色，那麼CSS可以這樣寫：

以下是代碼片段： 

1. #c1-2{  
2. color:red;  
3. }  
4.  

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

【編輯推薦】

1. DIV CSS中id與class使用用原則與技巧
2. 五大CSS3新技術用法指導
3. CSS中border和clear兩大屬性用法揭秘
4. 實例解析CSS DIV絕對定位與固定定位用法
5. 解讀DIV CSS網頁布局中CSS無效十個原因

【責任編輯：

程華權

TEL：[phone]】