Che cosa significa il selettore CSS "+" (segno più)?

Per esempio:

p + p {
  /* Some declarations */
}

Non so che cosa +significhi. Qual è la differenza tra questo e la definizione di uno stile psenza + p?

Vedi selettori adiacenti su W3.org.

In questo caso, il selettore indica che lo stile si applica solo ai paragrafi che seguono direttamente un altro paragrafo.

Un semplice pselettore applicherebbe lo stile a ogni paragrafo della pagina.

Funzionerà solo su IE7 o versioni successive. In IE6, lo stile non verrà applicato a nessun elemento. Questo vale anche per il >combinatore, tra l'altro.

Vedi anche la panoramica di Microsoft per la compatibilità CSS in Internet Explorer .

È il selettore di fratelli adiacenti.

Dal blog di Splash of Style.

Per definire un selettore CSS adiacente, viene utilizzato il segno più.

h1+p {color:blue;}

Il codice CSS sopra formatterà il primo paragrafo dopo (non all'interno) le intestazioni h1 come blu.

h1>pseleziona qualsiasi pelemento che sia un figlio diretto (di prima generazione) (interno) di un h1elemento.

• h1>ppartite <h1> <p></p> </h1>( <p>dentro <h1>)

h1+pselezionerà il primo pelemento che è un fratello (allo stesso livello del dom) come h1elemento.

• h1+ppartite <h1></h1> <p><p/>( <p>vicino a / dopo <h1>)

Il +segno significa selezionare un "fratello adiacente"

Ad esempio, questo stile verrà applicato dal secondo <p>:

p + p {
   font-weight: bold;
} 

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

Esempio

Guarda questo JSFiddle e lo capirai: http://jsfiddle.net/7c05m7tv/ (Un altro JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )

Supporto per il browser

I selettori di fratelli adiacenti sono supportati in tutti i browser moderni.

Per saperne di più

• 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

"+" è il selettore fratello adiacente. Selezionerà qualsiasi p DIRETTAMENTE DOPO ap (ma non un figlio o un genitore, un fratello).

+viene chiamato il selettore Adjacent Sibling Selector.

Ad esempio, il selettore p + pseleziona gli pelementi immediatamente successivi agli pelementi

Può essere pensato come un looking outsideselettore che controlla l'elemento immediatamente successivo.

Ecco un frammento di esempio per rendere le cose più chiare:

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>

Dato che siamo uno stesso argomento, vale la pena menzionare un altro selettore, ~selettore, che èGeneral Sibling Selector

Ad esempio, p ~ pseleziona tutto ciò pche segue pnon importa dove si trova, ma entrambi pdovrebbero avere lo stesso genitore.

Ecco come appare con lo stesso markup:

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>

Si noti che anche l'ultimo pè abbinato in questo esempio.

Corrisponderebbe a qualsiasi elemento pimmediatamente adiacente a un elemento 'p'. Vedi: http://www.w3.org/TR/CSS2/selector.html

+presenta uno dei relativi selettori. Elenco di tutti i relativi selettori:

div p- Tutti gli <p>elementi all'interno degli <div>elementi sono selezionati.

div > p- Tutti gli <p>elementi il ​​cui genitore diretto è <div>selezionato. Funziona anche al contrario ( p < div)

div + p- Tutti gli <p>elementi vengono posizionati immediatamente dopo la <div>selezione dell'elemento.

div ~ p- Sono selezionati tutti gli <p>elementi che sono preceduti da un <div>elemento.

Maggiori informazioni sui selettori sono disponibili qui .

Seleziona il paragrafo successivo e fa rientrare l'inizio del paragrafo da sinistra, proprio come si farebbe in 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.

l'output finale è simile al seguente

Il Plus (+) selezionerà il primo elemento immediato. Quando usi + selettore devi dare due parametri. Questo sarà più chiaro con l'esempio: qui div e span sono parametri, quindi in questo caso solo il primo span dopo il div sarà disegnato.

 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>

Lo stile sopra si applica solo al primo intervallo dopo il div. È importante notare che il secondo intervallo non verrà selezionato.

Significa che corrisponde a ogni pelemento che è immediatamente adiacente

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