¿Qué significa el selector CSS "+" (signo más)?

Por ejemplo:

p + p {
  /* Some declarations */
}

No sé lo que +significa. ¿Cuál es la diferencia entre esto y solo definir un estilo para pfuera + p?

Ver selectores adyacentes en W3.org.

En este caso, el selector significa que el estilo se aplica solo a los párrafos que siguen directamente a otro párrafo.

Un pselector simple aplicaría el estilo a cada párrafo de la página.

Esto solo funcionará en IE7 o superior. En IE6, el estilo no se aplicará a ningún elemento. Esto también va para el >combinador, por cierto.

Consulte también la descripción general de Microsoft para la compatibilidad CSS en Internet Explorer .

Es el selector de hermano adyacente.

Del blog Splash of Style.

Para definir un selector adyacente CSS, se usa el signo más.

h1+p {color:blue;}

El código CSS anterior formateará el primer párrafo después (no dentro) de cualquier encabezado h1 como azul.

h1>pselecciona cualquier pelemento que sea un hijo (interno) directo (de primera generación) de un h1elemento.

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

h1+pseleccionará el primer pelemento que es un hermano (al mismo nivel de dom) como h1elemento.

• h1+ppartidos <h1></h1> <p><p/>( <p>junto a / después <h1>)

El +signo significa seleccionar un "hermano adyacente"

Por ejemplo, este estilo se aplicará desde el segundo <p>:

p + p {
   font-weight: bold;
} 

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

Ejemplo

Vea este JSFiddle y lo comprenderá: http://jsfiddle.net/7c05m7tv/ (Otro JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )

Soporte de navegador

Los selectores de hermanos adyacentes son compatibles con todos los navegadores modernos.

Aprende más

• http://css-tricks.com/almanac/selectors/a/adarest-sibling/
• http://www.w3.org/TR/CSS2/selector.html#adarest-selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/Adarest_sibling_selectors

"+" es el selector de hermanos adyacentes. Seleccionará cualquier p DIRECTAMENTE DESPUÉS de ap (no un niño o padre, sino un hermano).

+Se llama selector Adjacent Sibling Selector.

Por ejemplo, el selector p + pselecciona los pelementos que siguen inmediatamente a los pelementos.

Puede considerarse como un looking outsideselector que verifica el elemento que sigue inmediatamente.

Aquí hay un fragmento de muestra para aclarar las cosas:

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 uno el mismo tema, vale la pena mencionar otro selector, ~selector, que esGeneral Sibling Selector

Por ejemplo, p ~ pselecciona todo lo pque sigue p, no importa dónde esté, pero ambos pdeben tener el mismo padre.

Así es como se ve con el mismo marcado:

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 el último ptambién coincide en esta muestra.

Coincidiría con cualquier elemento pque esté inmediatamente adyacente a un elemento 'p'. Ver: http://www.w3.org/TR/CSS2/selector.html

+presenta uno de los selectores relativos. Lista de todos los selectores relativos:

div p- Todos los <p>elementos dentro de los <div>elementos están seleccionados.

div > p- Se seleccionan todos los <p>elementos cuyo padre directo está <div>seleccionado. También funciona al revés ( p < div)

div + p- Todos los <p>elementos se colocan inmediatamente después de <div>seleccionar el elemento.

div ~ p- Se seleccionan todos los <p>elementos precedidos por un <div>elemento.

Más información sobre selectores verifique aquí .

Selecciona el siguiente párrafo y sangra el comienzo del párrafo desde la izquierda tal como lo haría en 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.

salida final se parece a esto

El signo más (+) seleccionará el primer elemento inmediato. Cuando usa el selector +, debe dar dos parámetros. Esto será más claro con el ejemplo: aquí div y span son parámetros, por lo que en este caso solo se aplicará el primer span después del 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>

El estilo anterior solo se aplicará al primer tramo después de div. Es importante tener en cuenta que no se seleccionará el segundo tramo.

Significa que coincide con cada pelemento que está inmediatamente adyacente

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