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.