¿Qué significa + en CSS?

Question

¿Qué significa la + en esta regla de CSS?

h2 + p { 
    font-size: 1.4em; 
    font-weight: bold; 
    color: #777; 
} 

Answer 1

+ es el adjacent sibling combinator.

Eso significa que el selector de h2 + p sólo se selecciona la p que viene inmediatamente después de un h2.

Un ejemplo:

<h2>Headline!</h2> 
<p>The first paragraph.</p> <!-- Selected [1] --> 
<p>The second paragraph.</p> <!-- Not selected [2] --> 

<h2>Another headline!</h2> 
<blockquote> 
    <p>A quotation.</p>  <!-- Not selected [3] --> 
</blockquote> 

lo que está seleccionado y lo que no lo es:

1. Seleccionado
   Este p viene justo después de la primera h2.

2. No seleccionado
   Este p se produce después de la primera p en contraposición a la h2. Dado que no sigue inmediatamente el h2, no está seleccionado.

   Sin embargo, ya que todavía sigue el elemento h2, pero no inmediatamente, el selector h2 + p no coincidirá con este elemento, pero se h2 ~ p, utilizando el general sibling combinator lugar.

3. No seleccionado
   Este p se encuentra dentro de un , y no hay h2 antes de que el interior de la cotización para satisfacer su selector.

Answer 2

selecciona todas las etiquetas P que están directamente al lado de una etiqueta h2. Luego le da los dichos atributos.

Answer 3

Se selecciona todos p elementos que son directamente después de un elemento h2 en el DOM. Por lo tanto, el siguiente elemento p se labró:

<h2>A heading</h2> 
<p>This paragraph will be styled.</p> 

pero esto no sería:

<h2>A heading</h2> 
<hr> 
<p>This paragraph will NOT be styled.</p> 

Y tampoco lo haría esto:

<p>This paragraph will NOT be styled.</p> 
<h2>A heading</h2> 

...o esto:

<h2>A heading</h2> 
<section> 
    <p>This paragraph will NOT be styled.</p> 
</section> 

Answer 4

afecta sólo a primera p que es siguiente directamente (viene directamente después) el H2

ejemplo 1:

<h2></h2> 
<p></p> <!-- THIS ONE IS AFFECTED --> 
<p></p> <!-- THIS ONE IS NOT AFFECTED --> 
<p></p> <!-- NOR THIS ONE --> 
<p></p> <!-- NOR THIS ONE --> 
<p></p> <!-- ETC --> 

ejemplo 2:

<h2></h2> 
<div></div> 
<p></p> <!-- THIS ONE IS NOT AFFECTED -->