Como o caractere "maior que" ou ">" é usado no CSS?

159

Eu já vi esse personagem várias vezes em arquivos CSS, mas não tenho idéia de como é usado. Alguém pode me explicar e mostrar como eles são úteis para facilitar o estilo de uma página?

css css-selectors Sam152
fonte
1
Esteja ciente de que ele requer o Windows Internet Explorer 7 ou posterior. Ou FF ou algum navegador moderno. http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx
Vili
BTW,> é normalmente conhecido como "maior que" (ou, estritamente falando incorretamente, como colchete de ângulo reto).
Richard
1
possível duplicação de O que significa o seletor CSS ">" (sinal maior que)?
TZHX 5/05

Respostas:

201

É um seletor filho de CSS. P > SPANsignifica aplicar o estilo a seguir a todas as tags SPAN que são filhos de uma Ptag.

Observe que "filho" significa "descendente imediato", não apenas qualquer descendente. P SPANé um seletor descendente , aplicando o estilo a seguir a todas as SPANmarcas que são filhos de uma Pmarca ou filhos recursivamente de qualquer outra marca que seja filha / descendente de uma Pmarca. P > SPANaplica-se apenas a SPANtags que são filhos de uma Ptag.

tpdi
fonte
6
Uma nota de cautela embora - não é suportado no IE6
wheresrhys
138 
p em

corresponderá a qualquer um <em>que esteja dentro de a <p>. Por exemplo, corresponderia aos seguintes <em>s:

<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>

Por outro lado,

p > em

Corresponderá apenas aos <em>filhos imediatos de <p>. Então vai combinar: 

<p>Text <em>foo</em> bar</p>

Mas não:

<p><strong><em>foo</em></strong></p>
Brian Campbell
fonte
7
Belo exemplo claro. embora a resposta do tpdi tenha sido útil, essa realmente facilitou o entendimento.
J. Scott Elblein
8

isso é conhecido como um combinador de crianças:

Um seletor combinador filho foi adicionado para poder estilizar o conteúdo dos elementos contidos em outros elementos especificados. Por exemplo, suponha que se queira definir branco como a cor dos hiperlinks dentro das tags div para uma determinada classe porque eles têm um fundo escuro. Isso pode ser feito usando um período para combinar div com os recursos da classe e um sinal de maior que como um combinador para combinar o par com a, como mostrado abaixo:

div.resources > a{color: white;}

(em http://www.xml.com/pub/a/2003/06/18/css3-selectors.html )

Adam Alexander
fonte