这个选择器的正式名称(根据W3C)是临近同属组合器。我觉得这个名称既长又复杂，因此把它简称为相邻选择器。虽说是"相邻"，但相邻选择器选取的却是一个元素的下一个元素。基于图3-14中的标记，图3-24中的标记示范了相邻选择器的形式。
注意：
IE 6本身并不支持相邻选择器；请查阅本书的网址www.wrox.com/go/beginning_css2e以获取兼容性方面的帮助。
 |
| 图 3-24 |
在图3-24中，可以看到加号被用来表示两个元素之间的相邻关系。你在这点上也许会有疑问：这么做看起来很舒服，但实际用途是什么？难道不能单独引用div#body来达到同样的效果吗？为什么需要一个相邻选择器？很高兴你这样问。在特定的情况下这个选择器会发挥作用，比如当几份HTML文档引用同一份样式表时。在一部分文档中，带有id名称heading的<div>元素和带有id名称body的<div>元素是相邻的，即它们在源文件中相继出现。在其他文档中这两个元素或许不是相邻的。如果你对这两种理论上不同的文档有不同的模板需求的话，自然会想通过某种方法来引用那些相邻的元素，这就是相邻选择器实际应用的一个例子。正如我在上一节"直接子选择器"中提到的那样，有时你不想创建新的id和类名。在某些情况下，当你使用相邻选择器时，能够避免创建新的类和id名称。
在接下来的概念验证型例子中，你将亲自试验相邻选择器。
试一试 相邻选择器
例3-5 按以下步骤，了解相邻选择器是如何工作的。
1. 在文本编辑器中输入以下标记：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>Next Sibling Selectors</title>
<link rel='stylesheet' type='text/css' href='Example_3-5.css' />
</head>
<body>
<h1>Next Sibling Selectors</h1>
<p>
The next sibling selector (or adjacent sibling combinator as
it's officially called) allows you to select an element based on
its sibling. This paragraph has a lightyellow background and
darkkhaki text.
</p>
<p>
This paragraph has a yellowgreen background and green text.
</p>
<p>
This paragraph has no colored background, border, or text.
</p>
</body>
</html>
|
2. 保存上述标记为Example_3-5.html。
3. 在文本编辑器中输入以下CSS：
body {
font: 12px sans-serif;
}
p {
padding: 5px;
}
h1 + p {
background: lightyellow;
color: darkkhaki;
border: 1px solid darkkhaki;
}
h1 + p + p {
background: yellowgreen;
color: green;
border: 1px solid green;
}
|
4.保存样式表为Example_3-5.css。将它在支持相邻选择器的浏览器中载入，你将看到如图3-25所示的结果。
 |
| （点击查看大图）图 3-25 |
工作原理
相邻选择器基于相邻关系应用样式。下面是对Example_3-5.css中有关样式的分析。
Example_3-5.css中的第一个样式应用于Example_3-5.html的第一段。h1 + p表示如果<p>元素是直接跟在<h1>元素后的元素，则应用本规则中的声明。
h1 + p {
background: lightyellow;
color: darkkhaki;
border: 1px solid darkkhaki;
}
|
只有当<p>元素是直接与<h1>元素相邻的元素时，这条规则才起作用。
第二条规则里使用了一个更为复杂的相邻选择器。它表示如果一个<p>元素直接相邻于另一个<p>元素，并且后者也直接相邻于一个<h1>元素时，应用本规则中的声明。
h1 + p + p {
background: yellowgreen;
color: green;
border: 1px solid green;
}
|
就像直接子选择器可以基于父子关系应用样式一样，相邻选择器可以基于相邻关系应用样式。
在很多时候，如果能基于元素的属性或属性值应用样式会很有用。