这个选择器的正式名称(根据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

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;

}

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

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

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

无可奈何花落去，七大没落软件排名
PCPOP.COM 2005年12月23日作者:Snake 编辑:Snake 第1页:没落软件排名第七 ICQ,输就输在软件单一的语言选择 ICQ,作为IM软件领域的缔造者,不得不说它成就了一个辉煌 ...
人脸年龄编辑：无可奈何花落去，似曾相似春又来！
今天向大家介绍一篇今天新出的论文 High Resolution Face Age Editing,该文提出一种简单的方法实现了高分辨率的人脸年龄编辑,效果惊艳,代码也开源了. 该文作者信息: 作者来 ...
奋斗吧，程序员——第十九章无可奈何花落去，似曾相识燕归来
美丽的公主对青蛙说:"为什么你只是一只青蛙呢,如果你能变成王子,我就嫁给你." 青蛙笑着说:"请你吻我一下吧,尊敬的公主殿下." 几秒钟过后...... &qu ...
无可奈何花落去，数据丢失时时来；何当共谈完整性，却话巴山夜雨时----详解SQL Server 数据库库完整性检查和置疑修复
前情提要数据库完整性! 这不是SQL Server独有,有点用户认为是SQL Server设计的问题出现数据库不完整,准确的告诉你,所有的数据库系统,都会存在这问题. 就是数据库出现不完整. ...
CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
html后代元素选择器,怎么使用html5中的后代选择器？后代选择器的用法详解!
最近网上很多小伙伴就在问,怎么使用html5中的后代选择器?看到这我就有点想说的了,对于怎么使用html5中的后代选择器,这个问题其实还是蛮重要的.对于想要从事互联网这块功的话算是基本都要有所了解的. ...
html5+css3---元素样式+选择器
文章目录前言一.圆角样式-border-radius 二.阴影样式-box-shadow 三.过渡样式与缩放样式--transition--transform 四.平移样式-translate 五 ...
html5群组选择器,css选择器
基本选择器通配选择器选择器:* 类型:通配选择器含义:选择文档中所有的HTML元素元素选择器选择器:E 类型:元素选择器含义:选择指定类型的HTML元素 ID选择器选择器:#ID 类型: ...
html5通用兄第选择器,css 通用兄弟选择器( ~ )
stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...

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

Next Sibling Selectors

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

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

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

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

最新文章

热门文章

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

Next Sibling Selectors

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

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

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

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

最新文章

热门文章

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

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