级别： 中级 Nicholas Chase, 总裁, Chase and Chase, Inc.
2002 年 9 月 01 日
更新 2008 年 8 月 07 日 页面编写者可以使用层叠样式表（Cascading Style Sheets，CSS）更精确地控制内容的外观。CSS 规则由一个选择符和设置的属性和值组成，其中的选择符决定应用这个规则的内容。尽管大多数开发人员习惯使用基于标记名的选择符，但是 CSS 实际上还提供了另外几种控制能力更强的选择符。本文讨论各种选择符并演示使用方法。
注意：
本文讲解 CSS 选择符在 Microsoft Internet Explorer 6.0 和 Netscape 7 等浏览器中的使用方法，但是从 Netscape Navigator 4.x 和 Internet Explorer 4.x 开始已经可以使用基本的选择符。对层叠样式表有基础的了解有助于学习本文。
基本页面和通用选择符
为了演示不同 CSS 选择符的用法，我在本文中使用一次狗展的结果。我构造这个页面是为了提供所需的不同示例，它本来是一个完全正常的页面，见 图 1 和 清单 1。
图 1. 基本页面
清单 1. 基本页面
<html>
<head>
<title>New Port Richey</title>
</head>
<body>
<h2 align="center">The New Port Richey Dog Show</h2>
<h4 align="center">Show Date: 7/31/2001</h4>
<h4 align="center">New Port Richey, FL</h4>
<p align="center">
<span class="category">Best In Show:</span>
<span id="bestinshow">CH Sarah's Razzle Dazzle
(Yorkshire Terrier)</span>
</p>
<p><a href="complete">Complete results</a></p>
<table align="center">
<tr>
<td class="category">
<a href="herding.html">Herding Group:</a>
</td>
<td>German Shepherd Dog</td>
<td>CH Sabre Dawn</td>
</tr>
<tr>
<td class="category">
<a href="toy.html">Toy Group:</a>
</td>
<td>Yorkshire Terrier</td>
<td>CH Sarah's Razzle Dazzle</td>
</tr>
<tr>
<td class="category">
<a href="sporting.html">Sporting Group:</a>
</td>
<td>Golden Retriever</td>
<td>CH Chase's Golden Chance</td>
</tr>
<tr>
<td class="category">
<a href="nonsporting.html">Non-Sporting Group:</a>
</td>
<td>Tibetan Terrier</td>
<td>CH Winston of Sunny Brook Lane</td>
</tr>
</table>
</body>
</html>
|
首先，创建一个 style 元素，各种 CSS 规则将放在这里。最简单的样式表是把一个规则应用于页面中的所有内容。创建这样的规则需要创建一个 style 元素和一个使用通用选择符（*）的规则，见 清单 2：
清单 2. 通用选择符
<html>
<head>
<title>New Port Richey</title>
<style type="text/css">
* { font-family: Verdana }
</style>
</head>
<body>
<h2 align="center">The New Port Richey Dog Show</h2>
<h4 align="center">Show Date: 7/31/2001</h4>
...
|
这个选择符在 Netscape 4.x 浏览器中不起作用，但在其他浏览器中它能把样式应用于所有适当的内容。清单 2 中的示例应用字体修改，见 图 2。（当然，某些样式属性对于某些元素没有意义。例如，字体修改对图形就没有意义）。
图 2. 通用选择符把样式应用于所有适当的内容
类型选择符
最常用的选择符可能是类型选择符，但是大多数人把它称为标记名或元素选择符。这个选择符根据元素名选择内容。例如，清单 3 中的代码修改表数据（td）元素中所有文本的大小，见 图 3：
清单 3. 类型选择符
...
<style type="text/css">
* { font-family: Verdana }
td { font-size: 10pt }
</style>
...
|
这个样式应用于表数据元素中的所有文本，无论这个元素位于页面层次结构中的什么位置。
图 3. 使用类型选择符
类选择符
仅次于类型选择符最常用的选择符是类选择符。类选择符选择 class 属性为特定值的所有元素。类选择符的语法是在类名前面加一个点号（.）。例如，清单 4 中的代码使 category 类中的所有文本以粗体显示：
清单 4. 使用类选择符
<style type="text/css">
* { font-family: Verdana }
td { font-size: 10pt }
.category { font-weight: bold; }
</style>
...
|
类是一种增强页面可管理性的出色方法，因为只需修改样式表，就可以对站点的外观进行全面修改。类还可以根据逻辑或业务条件区分内容，而不必仅仅依靠页面的结构。例如，可以创建一个类，通过它为所有人名设置样式。
在某些情况下，可以根据类所在的元素进一步限制基于类的规则。实现这个任务的方法是把类名附加在元素名后面。例如，清单 5 所示的代码把表数据单元格中的类别名设置为斜体。
清单 5. 根据元素限制一个类
...
<style type="text/css">
* { font-family: Verdana }
td { font-size: 10pt }
.category { font-weight: bold; }
td.category { font-style: italic }
</style>
...
|
因为文本 “Best In Show” 在表数据元素之外，所以不会应用这个新规则，见 图 4。
图 4. 使用类选择符
ID 选择符
另一种特殊选择符是 ID 选择符。与类选择符相似，ID 选择符也基于一个属性的值，但这个属性是 ID 属性。这个选择符用于选择出特定的单一元素；ID 在一个文档中应该是惟一的。例如，清单 6 中的代码在 ID 属性值前面加上一个磅符（#），从而选择 ID 为 bestinshow 的 span 并把它的颜色设置为红色，见 图 5。
清单 6. 使用 ID 选择符
...
<style type="text/css">
* { font-family: Verdana }
td { font-size: 10pt }
.category { font-weight: bold; }
td.category { font-style: italic }
#bestinshow { color: red }
</style>
...
|
图 5. ID 选择符选择一个特定元素
层次结构关系：后代、子和同胞
CSS 不但允许根据元素名应用规则，还允许根据元素在整个文档中的位置应用规则。例如，一个规则可以只选择段落标记内的链接。在 Document Object Model 中，这称为段落元素的后代（descendant），而段落元素称为祖先（ancestor）。在这种情况下，选择符是祖先元素名后面跟着后代元素名。例如，清单 7 中的代码选择段落中的所有链接（不包括表中的链接）并消除它们的下划线，见 图 6。
清单 7. 使用后代选择符
...
<style type="text/css">
* { font-family: Verdana }
td { font-size: 10pt }
.category { font-weight: bold; }
td.category { font-style: italic }
#bestinshow { color: red }
p a { text-decoration: none }
</style>
...
|
注意，这个规则应用于段落中任何地方的链接，包括嵌套在另一个元素中的链接。例如，如果 HTML 像下面这样：
<p><b><a href="complete">Complete results</a></b></p>
这个链接仍然是段落元素的后代。
但是，选择符也可以只选择祖先（或父）元素的直接后代（即子元素）。子选择符把规则限制为只选择父元素的直接子元素；到编写本文时为止，只有 Netscape 6 和更高版本支持子选择符。子选择符使用大于号：
p > a { text-decoration: none }
另一种更新的选择符是同胞选择符（在 Internet Explorer 中还不支持），它使用加号（+）。在这种情况下，规则只应用于跟在另一个元素后面的元素。例如，清单 8 中的代码只选择另一个 h4 元素后面的一个 h4 元素并把它设置为斜体，所以第一个 h4 元素保持不变，见 图 6。
清单 8. 使用后续同胞选择符
...
<style type="text/css">
* { font-family: Verdana }
td { font-size: 10pt }
.category { font-weight: bold; }
td.category { font-style: italic }
#bestinshow { color: red }
p a { text-decoration: none }
h4 + h4 { font-style: italic }
</style>
...
|
图 6. 后代、子和后续同胞选择符
伪类和伪元素
最后讨论的一组选择符不是基于任何特定元素，而是基于文档中的特定条件：伪类（pseudo-classes）。伪类的表示方法是在名称前面加一个冒号。伪类与特定元素无关，而是根据文档中发生的情况应用样式。最常用的伪类是 :hover 伪类，支持它的浏览器也最多，但是 Netscape 4.x 不支持它。当用户把鼠标停留在一个元素上时，这个伪类就会应用样式，见 清单 9 和 图 7。
清单 9. 使用 :hover 伪类
...
<style type="text/css">
* { font-family: Verdana }
td { font-size: 10pt }
.category { font-weight: bold; }
td.category { font-style: italic }
#bestinshow { color: red }
p a { text-decoration: none }
h4 + h4 { font-style: italic }
:hover { background-color: red }
</style>
...
|
图 7. 使用 :hover 伪类
还没有得到广泛支持的其他伪类包括 :first-child、:link、:visited、:active、:focus 和 :lang。注意，伪类可以应用于特定的元素类型，比如：
p:first-child { font-size: larger }
伪元素与伪类相似（语法也相同），但它定义的是文档中的内容。CSS2 Recommendation 定义的伪元素包括：
-
:first-line，选择内容的第一行，因此应用样式的范围可能取决于窗口的大小
-
:first-letter，可以用来实现 drop caps 等效果
-
:before 和 :after，与另一个选择符组合使用，常常用来把内容插入文档，比如：
-
*.category:before { content: "Category: " }
结束语
本文讨论了 CSS2 Recommendation 中定义的各种选择符。浏览器对某些选择符的支持还不是很充分，但是 CSS 的设计允许平稳退化；如果无法应用某个样式，页面应该仍然是合法有效的。但是，您应该在所有目标浏览器中测试页面。
参考资料
关于作者  | | | Nicholas Chase 曾经参与多家公司的网站开发，包括 Lucent Technologies、Sun Microsystems、Oracle 和 Tampa Bay Buccaneers。Nick 曾经做过高中物理教师、低放射性废弃设备管理员、在线科幻杂志的编辑、多媒体工程师和 Oracle 教员。他最近担任佛罗里达 Clearwater 的 Site Dynamics Interactive Communications 的首席技术官。他出版了三部关于 Web 开发的著作，包括 Java and XML From Scratch（Que）。他乐于倾听读者的意见，可以通过 nicholas@nicholaschase.com 联系他。
|
对本文的评价
| 
