第七课：元素组的识别与分组（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>。