相邻选择器

定义和用法

• E + F 用于选择第一个元素之后紧跟的元素。也称为相邻同级选择器。相邻兄弟结合符旁边可以有空白符。
• 此选择器选择作为另一个元素的以下相邻兄弟的元素。两个元素之间的任何文本都将被忽略；仅考虑元素及其在文档树中的位置。

语法:

E + F { sRules }

选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。

与兄弟选择符( E ~ F )相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）。

浏览器支持

所有浏览器都支持

例子

选择所有紧接着<div>元素之后的<p>元素:

div + p
{
background-color:yellow;
}

下例子中，选择所有父级是<div>元素的<p>元素。如果是相邻选择符，那么只有p1会变成红色；如果是兄弟选择符，那么p1/p2/p3都会变成红色；

/*相邻选择符(E+F)*/
h3 + p{color:#f00;}

/*兄弟选择符(E~F)*/
h3 ~ p{color:#f00;}

<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>