Qual é a diferença entre os seletores css "div + p" e "div ~ p" e "div> p"?
  • div + p: Ao fazer isso, todos os elementos p são colocados imediatamente após o elemento div.
  • div ~ p: Fazer isso selecionará todos os elementos p que são irmãos do elemento div.
  • div> p: Fazer isso selecionará todos os elementos p que são filhos imediatos (filhos de primeiro nível; e não seus sub filhos) do elemento div.

Os detalhes da sua pergunta respondem à sua pergunta.div> p - seleciona todos os elementos p cujo pai imediato é um elemento divdiv + p - seleciona todos os elementos p cujo irmão anterior é um elemento div. Para simplificar, isso seleciona todos os elementos p que aparecem logo após o fechamento de uma tag div.div ~ p - seleciona todos os elementos p cujo um dos irmãos anteriores é um elemento div. Isso implica que todos os tags colocadas após o fechamento de uma div, desde que não estejam entre outras tags, elas são selecionadas.

Um exemplo para ilustrar isso é o seguinte.

http://jsfiddle.net/zopeqznc/2/

A chave para entender os seletores de CSS é lê-los da direita para a esquerda. É assim que o navegador analisa seletores; então escreva um seletor da maneira que o navegador o lê.

div> p {}

é um "seletor de descendente direto". Isso significa, "encontre ap, agora aplique esse estilo apenas se o elemento pai estiver em uma div".

Isso comparado ao "seletor geral de descendentes", que é

div p {}

. Isso significa, "encontre uma página. Agora aplique esse estilo, desde que seja

Além disso

no

uma div "

div + p {}

é um seletor de irmão adjacente. Significa "encontrar ap, agora encontre uma div que vem imediatamente antes dela. Aplique esses estilos"

isso é comparado ao seletor de irmão não adjacente, que é

div ~ p {}

. Isso significa, "encontre uma página. Agora aplique esse estilo, desde que seja

Além disso

precedido por uma div "

os seletores de irmãos são úteis para criar estilos que dependem do conteúdo.

O seletor descendente direto é útil se você tiver uma marcação que pode ser aninhada várias vezes, mas com um estilo diferente. Os menus de navegação são um ótimo momento para usar esse seletor.