¿Cómo se usa el carácter "mayor que" o ">" en CSS?

He visto este personaje varias veces en archivos CSS pero no tengo idea de cómo se usa. ¿Alguien me lo puede explicar y mostrar cómo son útiles para facilitar el estilo de una página?

Es un selector secundario CSS. P > SPANsignifica aplicar el estilo que sigue a todas las etiquetas SPAN que son hijos de una Petiqueta.

Tenga en cuenta que "hijo" significa "descendiente inmediato", no cualquier descendiente. P SPANes un selector descendente , que aplica el estilo que sigue a todas las SPANetiquetas que son hijos de una Petiqueta o hijos recursivos de cualquier otra etiqueta que sea hijo / descendiente de una Petiqueta. P > SPANsolo se aplica a las SPANetiquetas que son hijos de una Petiqueta.

p em

coincidirá con cualquiera <em>que esté dentro de a <p>. Por ejemplo, coincidiría con los siguientes <em>s:

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

Por otra parte,

p > em

Solo coincidirá con <em>s que son hijos inmediatos de <p>. Entonces coincidirá:

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

Pero no:

<p><strong><em>foo</em></strong></p>

Esto se conoce como un Combinador de niños:

Se agregó un selector de combinador secundario para poder diseñar el contenido de los elementos contenidos en otros elementos especificados. Por ejemplo, supongamos que uno quiere establecer el blanco como el color de los hipervínculos dentro de las etiquetas div para una determinada clase porque tienen un fondo oscuro. Esto se puede lograr utilizando un punto para combinar div con los recursos de la clase y un signo mayor que como combinador para combinar el par con a, como se muestra a continuación:

div.resources > a{color: white;}

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

E > F

Coincide con cualquier elemento F que sea hijo de un elemento E.

más en http://www.w3.org/TR/CSS21/selector.html#child-selectors