「+」（プラス記号）CSSセレクターはどういう意味ですか？

例えば：

p + p {
  /* Some declarations */
}

どういう+意味かわかりません。これとpなしのスタイルを定義するだけの違いは何+ pですか？

W3.orgの隣接するセレクターを参照してください。

この場合、セレクターは、スタイルが別の段落の直後の段落にのみ適用されることを意味します。

プレーンpセレクターは、ページ内のすべての段落にスタイルを適用します。

これはIE7以降でのみ機能します。IE6では、スタイルはどの要素にも適用されません。>ちなみに、これはコンビネータにも当てはまります。

Internet ExplorerでのCSSの互換性については、Microsoftの概要もご覧ください。

隣接する兄弟セレクタです。

以下からのスタイルのブログのスプラッシュ。

CSS隣接セレクタを定義するには、プラス記号を使用します。

h1+p {color:blue;}

上記のCSSコードは、h1見出しの後（内部ではない）の最初の段落を青にフォーマットします。

h1>p選択任意pの直接（第一世代）の子（内部）である要素h1の要素。

• h1>p一致<h1> <p></p> </h1>（<p>内部<h1>）

h1+pp（domと同じレベルにある）兄弟である最初の要素を要素として選択しますh1。

• h1+p一致する<h1></h1> <p><p/>（<p>隣/後<h1>）

+符号手段は、「隣接兄弟」を選択します

たとえば、このスタイルは2番目から適用されます<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/en-US/docs/Web/CSS/Adjacent_sibling_selectors

「+」は隣接する兄弟セレクターです。apの直後の任意のpを選択します（ただし、子または親ではなく、兄弟）。

+セレクターが呼び出されAdjacent Sibling Selectorます。

たとえば、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すべてを選択します。場所は関係ありませんが、両方が同じ親を持つ必要があります。ppp

これは、同じマークアップでどのように見えるかです。

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

+相対セレクタの1つを示します。すべての相対セレクターのリスト：

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.

最終出力はこのようになります

プラス（+）は、最初の直接要素を選択します。+セレクターを使用する場合、2つのパラメーターを指定する必要があります。これは例によってより明確になります。ここではdivとspanがパラメーターであるため、この場合、divのスタイル設定が行われるのは最初のスパンのみです。

 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の後の最初のスパンにのみ適用されます。2番目のスパンは選択されないことに注意してください。

これpは、すぐ隣にあるすべての要素に一致することを意味します

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