O que significa o seletor CSS “+” (sinal de mais)?

Por exemplo:

p + p {
  /* Some declarations */
}

Eu não sei o que isso +significa. Qual é a diferença entre isso e apenas definir um estilo para psem + p?

Veja seletores adjacentes em W3.org.

Nesse caso, o seletor significa que o estilo se aplica apenas a parágrafos diretamente após outro parágrafo.

Um pseletor simples aplicaria o estilo a todos os parágrafos da página.

Isso funcionará apenas no IE7 ou superior. No IE6, o estilo não será aplicado a nenhum elemento. Isso também vale para o >combinador, a propósito.

Consulte também a visão geral da Microsoft para compatibilidade com CSS no Internet Explorer .

É o seletor de irmão adjacente.

Do blog Splash of Style.

Para definir um seletor adjacente de CSS, o sinal de adição é usado.

h1+p {color:blue;}

O código CSS acima formatará o primeiro parágrafo depois (não dentro) de qualquer cabeçalho h1 como azul.

h1>pseleciona qualquer pelemento que seja um filho direto (primeira geração) (interno) de um h1elemento.

• h1>pfósforos <h1> <p></p> </h1>( <p>dentro <h1>)

h1+pselecionará o primeiro pelemento que é um irmão (no mesmo nível do dom) que um h1elemento.

• h1+pcorrespondências <h1></h1> <p><p/>( <p>próximo / depois <h1>)

O +sinal significa selecionar um "irmão adjacente"

Por exemplo, este estilo será aplicado a partir do segundo <p>:

p + p {
   font-weight: bold;
} 

<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

Exemplo

Veja este JSFiddle e você o entenderá: http://jsfiddle.net/7c05m7tv/ (Outro JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )

Suporte do navegador

Os seletores de irmãos adjacentes são suportados em todos os navegadores modernos.

Saber mais

• 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

"+" é o seletor de irmão adjacente. Ele seleciona qualquer p DIRETAMENTE APÓS ap (embora não seja um filho ou pai ou mãe, um irmão).

+seletor é chamado Adjacent Sibling Selector.

Por exemplo, o seletor p + p, seleciona os pelementos imediatamente após os pelementos

Pode ser pensado como um looking outsideseletor que verifica o elemento imediatamente seguinte.

Aqui está um exemplo de trecho para deixar as coisas mais claras:

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>

Como somos o mesmo tópico, vale a pena mencionar outro seletor, ~seletor, que éGeneral Sibling Selector

Por exemplo, p ~ pseleciona tudo o pque segue p, não importa onde esteja, mas ambos pdevem ter o mesmo pai.

Aqui está como ele se parece com a mesma marcação:

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>

Observe que o último ptambém é correspondido nesta amostra.

Ele corresponderia a qualquer elemento pimediatamente adjacente ao elemento 'p'. Veja: http://www.w3.org/TR/CSS2/selector.html

+apresenta um dos seletores relativos. Lista de todos os seletores relativos:

div p- Todos os <p>elementos dentro dos <div>elementos são selecionados.

div > p- Todos os <p>elementos cujo pai direto é <div>selecionado. Também funciona para trás ( p < div)

div + p- Todos os <p>elementos são colocados imediatamente após o <div>elemento ser selecionado.

div ~ p- Todos os <p>elementos precedidos por um <div>elemento são selecionados.

Mais sobre os seletores, verifique aqui .

Ele seleciona o próximo parágrafo e recua o início do parágrafo a partir da esquerda, como você faria no 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.

saída final parecido com este

O sinal de mais (+) seleciona o primeiro elemento imediato. Ao usar o seletor +, você deve fornecer dois parâmetros. Isso ficará mais claro por exemplo: aqui div e span são parâmetros, portanto, neste caso, somente o primeiro span após a div será denominado.

 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>

O estilo acima será aplicado somente ao primeiro período após div. É importante observar que o segundo intervalo não será selecionado.

Significa que ele corresponde a todos os pelementos imediatamente adjacentes

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