这是相邻同级选择器。

来自Splash of Style博客。

要定义CSS相邻选择器使用加号。h1+p｛颜色：蓝色；｝上面的CSS代码将格式化任何h1标题后的第一段（不在里面）蓝色。

h1>p选择作为h1元素的直接（第一代）子元素（内部）的任何p元素。

h1>p匹配<h1><p></p></h1>（<p>内部<h1>）

h1+p将选择第一个p元素作为h1元素，该元素是兄弟元素（在dom的同一级别）。

h1+p匹配<h1></h1><p><p/>（<p>在<h1>旁边/之后）

+选择器以后面的一个元素为目标。类似地，~选择器以后面的所有元素为目标。如果你感到困惑，这里有一个图表：

+符号表示选择“相邻兄弟”

例如，此样式将从第二个＜p＞开始应用：

p+p{字号：粗体；} ＜div＞<p>第1段</p><p>第2段</p></div>

实例

看到这个JSFiddle，你就会明白：http://jsfiddle.net/7c05m7tv/（另一个JSFiddle：http://jsfiddle.net/7c05m7tv/70/)

浏览器支持

所有现代浏览器都支持相邻的同级选择器。

了解更多信息

http://css-tricks.com/almanac/selectors/a/adjacent-sibling/http://www.w3.org/TR/CSS2/selector.html#adjacent-选择器https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

+显示一个相对选择器。以下是所有相对选择器的列表：

div p-选中＜div＞元素中的所有＜p＞元素。

div>p-选择直接父级为＜div＞的所有＜p＞元素。它也向后工作（p<div）

div+p-选择一个＜div＞元素之后立即放置的所有＜p＞元素。

div~p-选择前面有＜div＞元素的所有＜p＞元素。

下面是关于选择器的更多信息。

请参见W3.org上的相邻选择器。

在这种情况下，选择器意味着样式仅适用于另一段落后面的段落。

纯p选择器会将样式应用于页面中的每个段落。

这只适用于IE7或更高版本。在IE6中，样式不会应用于任何元素。顺便说一下，这也适用于>组合子。

另请参阅Microsoft在Internet Explorer中的CSS兼容性概述。

+组合子称为相邻兄弟组合子/下一兄弟组合子。

例如，p+p选择器的组合选择紧跟在p元素之后的p元素

它可以被认为是一种“边看”组合，用于检查紧接着的元素。

下面是一个示例片段，可以让事情更清楚：

正文{font-family:宋体；字体大小：12px；}p+p{左边距：10px；}＜div＞<p>标题段落</p><p>这是一段</p><p>这是另一段</p><p>这是另一段</p><小时><p>页脚段落</p></div>

由于我们在同一主题上，值得一提的是另一个组合子~，它是通用兄弟组合子/后继兄弟组合子

例如，p~p选择p后面的所有p并不重要，但这两个p应该具有相同的父级。

下面是使用相同标记的情况：

正文{font-family:宋体；字体大小：12px；}p~p{左边距：10px；}＜div＞<p>标题段落</p><p>这是一段</p><p>这是另一段</p><p>这是另一段</p><小时><p>页脚段落</p></div>

注意，最后一个p也在这个示例中匹配。