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，栏标题的格式才为白色。

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