“+”是相邻的同级选择器。它将在p之后直接选择任何p（但不是子代或父代，而是兄弟姐妹）。

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

例如，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也在这个示例中匹配。

“+”是相邻的同级选择器。它将在p之后直接选择任何p（但不是子代或父代，而是兄弟姐妹）。

这是相邻同级选择器。

来自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。参见：http://www.w3.org/TR/CSS2/selector.html

p+p{
//styling the code
}

p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.

    <div>
    <input type="text" placeholder="something">
    <p>This is first paragraph</p>
    <button>Button </button>
    <p> This is second paragraph</p>
    <p>This is third paragraph</p>
    </div>

    Styling part 
    <style type="text/css">
        p+p{
            color: red;
            font-weight: bolder;
        }
    </style>

   It will style all sibling paragraph with red color.

最终输出如下