html5相邻选择器,相邻选择器 - 无可奈何花落去 似曾相识燕归来 - BlogJava

这个选择器的正式名称(根据W3C)是临近同属组合器。我觉得这个名称既长又复杂，因此把它简称为相邻选择器。虽说是"相邻"，但相邻选择器选取的却是一个元素的下一个元素。基于图3-14中的标记，图3-24中的标记示范了相邻选择器的形式。

注意：

IE 6本身并不支持相邻选择器；请查阅本书的网址www.wrox.com/go/beginning_css2e以获取兼容性方面的帮助。

图  3-24

在图3-24中，可以看到加号被用来表示两个元素之间的相邻关系。你在这点上也许会有疑问：这么做看起来很舒服，但实际用途是什么？难道不能单独引用div#body来达到同样的效果吗？为什么需要一个相邻选择器？很高兴你这样问。在特定的情况下这个选择器会发挥作用，比如当几份HTML文档引用同一份样式表时。在一部分文档中，带有id名称heading的

元素和带有id名称body的

元素是相邻的，即它们在源文件中相继出现。在其他文档中这两个元素或许不是相邻的。如果你对这两种理论上不同的文档有不同的模板需求的话，自然会想通过某种方法来引用那些相邻的元素，这就是相邻选择器实际应用的一个例子。正如我在上一节"直接子选择器"中提到的那样，有时你不想创建新的id和类名。在某些情况下，当你使用相邻选择器时，能够避免创建新的类和id名称。

在接下来的概念验证型例子中，你将亲自试验相邻选择器。

试一试 相邻选择器

例3-5  按以下步骤，了解相邻选择器是如何工作的。

1. 在文本编辑器中输入以下标记：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Next Sibling Selectors

Next Sibling Selectors

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.

This paragraph has a yellowgreen background and green text.

This paragraph has no colored background, border, or text.

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表示如果

元素是直接跟在

元素后的元素，则应用本规则中的声明。

h1 + p {

background: lightyellow;

color: darkkhaki;

border: 1px solid darkkhaki;

}

只有当

元素是直接与

元素相邻的元素时，这条规则才起作用。

第二条规则里使用了一个更为复杂的相邻选择器。它表示如果一个

元素直接相邻于另一个

元素，并且后者也直接相邻于一个

元素时，应用本规则中的声明。

h1 + p + p {

background: yellowgreen;

color: green;

border: 1px solid green;

}

就像直接子选择器可以基于父子关系应用样式一样，相邻选择器可以基于相邻关系应用样式。

在很多时候，如果能基于元素的属性或属性值应用样式会很有用。