14.8.3 CSS E + F 直接相邻选择符

E + F -- CSS直接相邻选择符，匹配文档中符合选择符规定的直接相邻关系的元素

语法: E + F
- E + F，E、F代表简单选择符
引用网址：http://www.dreamdu.com/css/selector_combinator_adjacent_sibling/
说明：
- 匹配文档中符合选择符规定的直接相邻关系的元素，例如E + F选择符，E和F在文档被相同的元素包含（具有相同的父元素），且文档中F紧随E之后出现，则选择符匹配元素F
- 包含选择符是由两个使用+（加号，plus sign）连接的简单选择符组成
- "相邻兄弟、姐妹"adjacent sibling代表文档中一个元素是另外一个元素的并排相邻，举个例子：如果一个母亲只有三个亲生儿子，老大、老二、老三，那么老大与老二就是直接相邻关系，老大与老三是普通相邻关系
- 在HTML文档中head与body标签总是直接相邻的，而且他们都是html标签的子元素
直接相邻选择符的英文名称为"adjacent sibling combinator"，adjacent，中文"邻"的意思，sibling，中文"兄弟、姐妹"的意思，combinator，中文"组合"的意思

示例

h1 + p
{
	color:red;
}

上面例子定义了直接相邻选择符

<h1>梦之都CSS 直接相邻选择符</h1>
<p>
        使用了样式
</p>

由于p和h1是直接的邻居,所以p段落中的内容可以显示红色样式

<h1>梦之都CSS 直接相邻选择符</h1>
<span>错误</span>
<p>
        无法使用样式
</p>

下面的一个例子，缩小了紧跟在h1之后的h2元素的垂直距离：

h1 + h2
{
	margin-top: -1em;
	color: green;
}

下面的规则同上一个类似，不过它加入了类选择符。因此只有当h1具有class=dreamdu类时才适用：

h1.dreamdu + h2
{
	margin-top: -2em;
	color: red;
}

CSS直接相邻选择符浏览器兼容性
选择符	IE6	IE7	IE8	IE9	FF	CH	OP	SA
E + F	no	yes	yes	yes	yes	yes	yes	yes