CSS选择符的应用

一个CSS选择符由一个与文档树中所有元素相匹配的模式构成。它的CSS规则适用于所有与模式匹配的元素。上周我概括介绍了各种类型的CSS选择符。本周我将讨论相邻同级和属性选择符，以及伪类和伪元素。

相邻同级选择符

相邻同级选择符让你选择紧接在一个元素后面的同级元素。它允许你选择紧靠在一个特定元素后的元素，并对它使用样式。这些选择符的语法是用加号(+)连接同级元素。

例如，你可能希望对某些标题元素后的段落使用与其它段落不同的样式。列表A中的例子选择紧贴在h1后面的元素，即说明这个问题。这个例子还指出，选中h1元素后的第二个段落时，同级元素可以指定给第二个段落，其字体颜色设定为绿色。

虽然应用元素和它们的子或同级元素拥有许多选项，但你可能希望通过属性值对元素使用样式。

属性选择符

属性选择符使用一个元素的属性。也就是说，属性或指定的属性值是应用某个CSS样式的决定性因素。属性选择符共有四种用法：

[attribute]：只要属性存在，不管是否存在属性值，都进行匹配。
[attribute = value]：如果属性存在指定值，则返回一个匹配。
[attribute ~= value]：如果属性存在，则返回一个匹配；它包含一个由逗号隔开的属性值列表，其中含有指定的属性值。
[attribute |= value]：如果属性是由连字符分隔的属性值列表中的第一个值，则进行匹配。这个语法主要用于匹配由lang属性（XHMTL中的xml:lang）指定的语法子码。
列表B中的例子说明了属性选择符的用法。如果且只有它包含一个概括属性时，它才对表进行格式化；它将abbr属性值为sales的栏的字体颜色设为白色；将标题属性值为col1的表栏的背景设为黄色。（警告：这个例子在Internet Explorer中无法正常运行，但在最新版的Firefox中能够正常显示。这个网站提供CSS选择符支持的浏览器列表。）

另外，你可以组合使用多个属性选择符，以便在一个CSS规则中应用几个条件。列表C对前面的例子进行了一些修改，说明了这个问题。注意，只有abbr属性设为sales；scope属性设为col，栏标题的格式才为白色。

到现在为止，选择符主要用于处理文档树中的已有项目，但你也可以用它来处理页面标准特性以外的元素。

伪类

CSS支持伪元素和伪类。在CSS中，伪表示你可以对一个文档层次中不存在的，没有CSS选择符的元素使用样式。根据状态（visited, active等）对一个超链接使用样式就是一个典型的例子。下面的列表简单说明了CSS支持的伪类：

active：对一个活动元素使用样式。
focus：对一个受到关注的元素使用样式。
hover：当用户鼠标划过一个元素时，对它使用样式。
link：对一个未被访问的链接使用样式。
visited：对一个已被访问的链接使用样式。
first-child：对元素的第一个子元素使用样式。
lang：允许作者给特定的元素指定一种语言。
CSS1支持与链接有关的伪类(active, hover, link, visited)，CSS2增加了其它伪类。伪类的语法是使用一个逗号将伪类与元素分隔开来。列表D用伪类对锚元素，以及段落元素的第一个子元素使用样式。

你可以通过一个优秀的在线指南确定一个特殊的浏览器是否支持某个特性。CSS还支持用伪元素来处理信息。

伪元素

伪元素允许你对文档树中不存在的信息使用样式。大量例子说明如何对一个元素内容的首行或首字母使用样式。下面列出了CSS当前支持的伪元素：

first-line：允许你对一个段落的首行内容应用特殊样式。
first-letter：允许你对一个元素内容的首字母应用样式。你可以选择常用的印刷效果，如首字母大写和下坠大写字母。
before：允许你在一个元素的内容之前插入生成的内容。
after：允许你在一个元素的内容之后插入生成的内容。
列表E对前面的例子进行扩充，使用首行和首字母伪元素对段落使用样式。段落的第一行全部以大写字母显示。首行由浏览器和它的宽度控制。因此，你可能希望插入自己的分行符或对文本进行相应格式化来控制首行显示。另外，段落的首字母为大字斜体字，并且带下坠大写字母显示效果。

大量选项

许多Web开发者常犯的一个错误就是不熟悉CSS标准的各种细微差别。选择符就是一个典型的例子，它为你给网页元素应用样式提供大量选择。过去两周来，你简单了解了CSS支持的各种选择符。这些选择符允许你根据元素的类型、它们周围的样式、属性等对元素使用样式。

你最喜欢使用哪个选择符？或者发现某些选择符缺少支持资料？请在文后的讨论区发表你的看法，与Web开发社区分享你的经历。

Tony Patton拥有丰富的Java、VB、Lotus及XML方面的知识，是一个专业的应用程序开发人员。

责任编辑:德东

推荐阅读:

优化PHP代码的40条建议

网络背后潜藏的隐形杀手

IT人士职业调查

报告称企业08年对web2.0需求强劲

 营销案例