O que significa + em CSS?

O que significa o + nesta regra CSS?

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

+ é o combinador irmão adjacente .

Isso significa que o seletor h2 + p seleciona apenas o p que vem imediatamente após um h2 .

Uma ilustração:

 

Headline!

The first paragraph.

The second paragraph.

Another headline!

A quotation.

O que é selecionado e o que não é:

  1. Selecionado
    Este p vem logo após o primeiro h2 .

  2. Não selecionado
    Este p ocorre após o primeiro p em oposição ao h2 . Como não segue imediatamente o h2 , ele não está selecionado.

    No entanto, como ainda segue o elemento h2 , apenas não imediatamente, o seletor h2 + p não corresponderá a esse elemento, mas h2 ~ p usará o combinador irmão em vez disso.

  3. Não selecionado
    Este p está localizado dentro de um blockquote , e não há h2 antes dele dentro da citação para satisfazer seu seletor.

Seleciona todos os elementos p diretamente após um elemento h2 no DOM. Assim, o seguinte elemento p seria estilizado:

 

A heading

This paragraph will be styled.

Mas isso não iria:

 

A heading


This paragraph will NOT be styled.

E nem isso:

 

This paragraph will NOT be styled.

A heading

…ou isto:

 

A heading

This paragraph will NOT be styled.

ele seleciona todas as tags P que estão diretamente ao lado de uma tag h2. Em seguida, dá os ditos atributos.

Só afeta primeiro p que está seguindo diretamente (vem diretamente depois) o H2

Exemplo 1:

 

exemplo 2: