“ +”（加号）CSS选择器是什么意思？

例如：

p + p {
  /* Some declarations */
}

我不知道是什么+意思 这和只为p没有定义样式之间有什么区别+ p？

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

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

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

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

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

这是相邻的兄弟选择器。

从风格飞溅博客。

要定义CSS相邻选择器，请使用加号。

h1+p {color:blue;}

上面的CSS代码会将任何h1标题之后（而不是内部）的第一段格式设置为蓝色。

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

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

h1+p将选择p作为同级（与dom处于同一级别）的同级的第一个h1元素。

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

该+标志意味着选择一个“相邻的兄弟”

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

p + p {
   font-weight: bold;
} 

<div>
   <p>Paragraph 1</p>
   <p>Paragraph 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-selectors
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_selectors

“ +”是相邻的兄弟选择器。它将直接选择ap之后的任何p（尽管不是孩子或父母，而是同级）。

+选择器称为Adjacent Sibling Selector。

例如，选择器p + p，选择p紧随元素之后的p元素

可以将其视为looking outside检查紧随其后的元素的选择器。

这是一个示例片段，使事情变得更加清晰：

body {
  font-family: Tahoma;
  font-size: 12px;
}
p + p {
  margin-left: 10px;
}

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

由于我们是同一主题，因此值得一提的是另一个选择~器General Sibling Selector

例如，p ~ p选择所有p紧随其后的内容p都无关紧要，但是两者p都应具有相同的父对象。

这是带有相同标记的外观：

body {
  font-family: Tahoma;
  font-size: 12px;
}
p ~ p {
  margin-left: 10px;
}

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

请注意，p此示例中的最后一个也是匹配的。

它将匹配p与元素“ p”紧邻的任何元素。请参阅：http：//www.w3.org/TR/CSS2/selector.html

+显示相对选择器之一。所有相关选择器的列表：

div p- 选择了<p>元素内部的所有元素<div>。

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

div + p-所有<p>元素都紧接在<div>元素之后。

div ~ p-选择所有在<p>元素之前的<div>元素。

有关选择器的更多信息，请参见此处。

就像您在Microsoft Word中一样，它选择下一个段落并从左开始缩进该段落的开头。

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.

最终输出看起来像这样

加号（+）将选择第一个立即元素。使用+选择器时，必须提供两个参数。通过示例将更加清楚：此处div和span是参数，因此在这种情况下，仅将对div之后的第一个span进行样式设置。

 div+ span{
   color: green;
   padding :100px;
}

     <div>The top or first element  </div>
       <span >this is span immediately after div, this will be selected</span>
       <span>This will not be selected</span>

以上样式仅适用于div之后的第一个跨度。重要的是要注意，不会选择第二个跨度。

这意味着它与每个p紧邻的元素匹配

www.snoopcode.com/css/examples/css-adjacent-sibling-selector