如果只用CSS来控制少量的页面元素，可能会有读者认为这太简单了。本章我们开始充分展示CSS的能力，跨多个样式表使用各种相冲突的选择器，当然这样会带来很多麻烦。

事实上，这种“麻烦”一般是有意为之的。当然，我们并不是去故意制造这样的麻烦，但是，这是一种无比强大的系统，可以产生任何人刚开始使用时都难以想象的效果。

本章主要讨论CSS的层叠、继承、分组以及上下文。此外，还介绍了继续深入之前需要考虑的CSS的各种度量。每种单位都适用于特定的环境。在此，我并不想说太多，但是我觉得这些基本知识将有助于更好地了解CSS能干些什么，并且有助于你在后续的章节中做出更明智的决定。放心吧，别担心你又重复阅读了本章的内容。理解这些核心概念对你来说是非常有用的。

具体说来，本章包括：

q ID和类；

q 使用层叠；

q 分组；

q 继承；

q 上下文选择器；

q CSS度量。

2.1  ID与类

到目前为止，我们仅仅看到了通过基本选择器来应用样式的方法。基本选择器针对已有的(X)HTML标签，通过重新定义部分和全部的默认属性从而为整个元素加上样式。例如，下面的规则将使得所有段落都变成红色。

p{color:#F00;}

非常幸运的是，CSS允许定义自己的选择器，即ID选择器和类选择器。ID和类可以作为简单属性应用到(X)HTML元素中，从而更严格地控制设计，并更好地和设计相结合。

一直以来，许多开发人员经常将ID和类搞混，或者不能正确使用这两类选择器，或者简单地用一个代替另外一个。

2.1.1  ID

每个ID在一个页面中只能使用一次，作为某个元素的唯一标识符。一般情况下，ID只用于页面的唯一元素，如页眉、主导航栏、页脚或用户界面的其他关键部分。

1. 应用ID

应用ID最一般的方法是以id="name"的形式直接引入到(X)HTML，紧跟在元素的起始标签之后。在下面这个例子中，我们使用了highlight和default两个ID，并将它们分别应用到两个段落：

相应的CSS则通过#来标识某规则是唯一ID。#和ID名一起作为规则的起始，后面跟着属性的声明：

2. 将ID和选择器结合

新的或者已有的ID可以和选择器相结合，从而为样式表添加更多的控制。在下面的例子中，基本的CSS将所有的h2标题设计为深灰色，并且字号为16像素。

这个样式适合于大多数的<h2>标题。但是，如果页面的主<h2>（文章的标题）需要不同的颜色来突出强调时，就需要定义新的规则。在规则中，选择器定义成element#name的形式。

这样，如果(X)HTML文件中的<h2>通过id="title"来标识的话，新的规则将用红色(color:#F00;)来改写默认的颜色。由于新的规则并没有重新定义font-size，所以标题的字号不会发生任何变化。在页面中，仅仅需要添加一个唯一标识符。

但是，必须牢记这个title是唯一的，它不能在模板的其他地方再次使用。页面中<h2>的其他所有实例都使用默认的样式。

3. 使用ID的场合

对于每个ID而言，每个页面只能有一个元素使用该样式，因此ID应该为每个页面唯一存在并仅使用一次的元素保留，如页眉、边栏、主导航栏或者页脚等。由于所有的ID属性都表示唯一的内容区域或者是页面的特殊部分，这样将能够方便地浏览标记，同时还可以为更复杂的CSS应用提供更好的灵活性。关于ID的进一步使用将会在2.5节予以讨论。

4. 避免使用ID的场合

当有一个以上的地方需要使用同一CSS规则时，不应该使用ID。也不要在将来可能在多个地方使用到的规则中使用ID，如多幅图像、链接样式或者段落。试着采用其他的方法来为多于一次使用样式的地方提供样式。

2.1.2  类

类可以在页面中无限次地使用，因此它是应用CSS的非常灵活的方法。类可以将元素定义为一个组的成员，也可以定义成可重用对象或者样式。类可以解决一些简单的问题，但是对于较复杂的CSS设计而言，却缺乏灵活性。

1. 应用类

使用类最常用的方法是在(X)HTML中通过元素的class="name"属性来引用它。和前面ID的例子一样，下面的例子使用了两个类：highlight（红色文本）和default（深灰色文本）。

值得注意的是，由于标识符是类，所以它们可以多次使用。这样，在这个例子中，两个标识为default的段落拥有相同的样式。但是，如果使用ID的话，这样是行不通的。

相应的CSS通过一个句点（.）来标识一个规则是可重用的类。句点和类名一起作为新规则的起始，接着便是属性声明。

2. 结合多个类和ID

当希望控制多个元素时，类非常有用。以下面的drinks列表为例，其源代码在drinks.html文件中。

首先将注意到，无序列表(<ul>)拥有唯一ID。因此，id="drinks"任何时候都不能在页面中再次使用，以保证该列表拥有特有的样式。同样值得注意的是，列表中的Beer和Spirits拥有class="alcohol"属性，Cola和Lemonade拥有class="mixer"属性，而Tea和Coffee则拥有class="hot"属性。这样就允许单独考虑每个饮料分组了。

CSS声明列表的默认文本是红色的，因此，任何不带类属性的项都具有默认的红色文本。

接着，对每个饮料种类的类字体颜色定义了唯一的灰度。

这样，你会看到列表项颜色发生了变化（通过类定义）。任何将来添加到列表中的饮料都要被赋予一个特殊的饮料组，如<li class="alcohol">Wine</li>。因此，通过利用简单的CSS类，已经建立了一个逻辑的颜色键值。

3. 利用类改写基本样式

本书的后续部分将学习到一些控制页面中重复出现的元素的更好方法。实际上，有很多更容易的方法既可以定义段落的样式和其他元素，又不需要在(X)HTML中添加标识符。实际上，以前的学习中已经或多或少地实现了这一点。

在第1章中，已经学习了如何通过基本的CSS规则将所有段落变成红色字体。现在，再次使用这个规则，声明所有的段落实例都是红色。但是，现在需要在CSS中添加一个类规则。该规则将所有用类标识的元素“漂白”，即将文本变成浅灰色。

在这个例子中，所有的段落仍然默认为红色，但是在必要时，通过将元素标识为bleached类可以改变这个元素的颜色，如在下面的(X)HTML中：

由于bleached规则中声明的颜色改写了红色，第二段现在已经变成了浅灰色。而bleached中没有重新定义font-size，因此，该段落的字号还是12像素高。如果在bleached中添加一个font-size声明，那么所有由class="bleached"标识的段落的字号将被覆盖。

4. 直接将类链接到元素

在这个例子中，我们以element.classname的形式直接将类附加到元素来构造CSS规则。像前面一样，在(X)HTML中该规则同样以class="classname"的形式被引用。

如果bleached类的标准的声明需要重新定义的话，就可以采用这种方法。在上面的例子中，任何给定了bleached类的元素仍然是浅灰色(color:#CCC;)，但是带有bleached类的段落元素是黑色的(color:#000;)。当大量类的实例散布在 (X)HTML中，并且难以手动去除时，这种方法比较有用。该方法并不去除这些类，而是通过利用element.classname的形式来改变所有需要改变的那些通过类定义的元素。

5. 应用类的场合

正如前面描述的，类是一种应用CSS规则的灵活方法，可以在页面中重复使用。目前，我们仅仅使用类来控制属于一个组的元素，从而改善ID的行为。

6. 避免使用类的场合

尽管类可以用到任何地方，但是在页面的主结构元素（如页眉、主导航栏）中不推荐使用。因为这样做将降低设计的灵活性，并且不得不通过大量修改或添加另外的标签来实现用户定制。此外，确定类使用的必要性是必需的。只有通过为现有的(X)HTML定义规则仍不能实现这些目标时，才使用类。千万记住，类主要用来定义正常样式的例外情况，而不是用来定义标准样式的。