第七課：元素組的識別與分組（class和id）

有時候，你想給特定元素或一組元素施用特定風格。本課將進一步探討怎樣用class和id給選定的元素定義特性。

怎樣讓網站上的一個特殊標題不同于其它標題？怎樣把鏈接組分成不同類別，并給每個類別一個特殊風格？下面是一些答案實例

用class分組元素

假設我們有兩列不同葡萄（用于生產白和紅葡萄酒）的鏈接，HTML代碼如下。：

<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>

<p>Grapes for red wine:</p>
<ul>
<li><a href=”cs.htm”>Cabernet Sauvignon</a></li>
<li><a href=”me.htm”>Merlot</a></li>
<li><a href=”pn.htm”>Pinot Noir</a></li>
</ul>

我們想讓白葡萄酒鏈接變成黃色，紅葡萄酒鏈接變成紅色，網頁的其余鏈接是藍色。要獲得這種效果，需要將鏈接分為兩類。用屬性class給每個鏈接安排類別就能做到這一點。讓我們嘗試定義上面例子的類別：

<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>

<p>Grapes for red wine:</p>
<ul>
<li><a href=”cs.htm” class=”redwine”>Cabernet Sauvignon</a></li>
<li><a href=”me.htm” class=”redwine”>Merlot</a></li>
<li><a href=”pn.htm” class=”redwine”>Pinot Noir</a></li>
</ul>

我們可以在后面分別定義分屬于白葡萄酒和紅葡萄酒鏈接的特性。

a {
color: blue;
}

a.whitewine {
color: #FFBB00;
}

a.redwine {
color: #800000;
}

正如實例所示，你可以用.classname定義屬于特定類的元素特性。

用id識別元素

除了組元素以外，還可以用CSS代碼id識別和定義單個元素。屬性id的特殊之處是，同一個文件中不會有id相同的元素。每一個id都是唯一的。在其它情況下，用class代替。現在，讓我們看看使用id的實例：

<h1>Chapter 1</h1>
...
<h2>Chapter 1.1</h2>
...
<h2>Chapter 1.2</h2>
...
<h1>Chapter 2</h1>
...
<h2>Chapter 2.1</h2>
...
<h3>Chapter 2.1.2</h3>
...

上面標題可以是任何文件中段落或章節的標題。它很自然的給每個段落分配一個id：

<h1 id="c1">Chapter 1</h1>
...
<h2 id="c1-1">Chapter 1.1</h2>
...
<h2 id="c1-2">Chapter 1.2</h2>
...
<h1 id="c2">Chapter 2</h1>
...
<h2 id="c2-1">Chapter 2.1</h2>
...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
...

假設段落1.2的標題必須是紅色，可以用CSS做到這一點：

#c1-2 {
color: red;
}

上述實例展示了如何用#id定義特定元素特性的方法。

總結

這一課學習了classs和id的使用，因此能讓你定義特殊元素的特定屬性。下一課，我們將學習和使用<span>和<div>。