2009-04-14 13 views
115

He visto este personaje varias veces en archivos CSS, pero no tengo idea de cómo se usa. ¿Alguien me puede explicar y mostrar cómo son útiles para facilitar el estilo de una página?¿Cómo se usa el carácter "mayor que" o ">" en CSS?

+0

Por cierto,> que normalmente se conoce como "mayor que" (o, en sentido estricto erróneamente, como soporte de ángulo recto). – Richard

+1

Tenga en cuenta que requiere Windows Internet Explorer 7 o posterior. O FF o algún navegador moderno. [http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx](http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx) – Vili

+0

posible duplicado de [¿Qué significa el selector de CSS ">" (signo más grande)?] (http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css -selector-mean) – TZHX

Respuesta

153

Es un selector de elementos secundarios CSS. P > SPAN significa aplicar el estilo que sigue a todas las etiquetas SPAN que son elementos secundarios de una etiqueta P.

Tenga en cuenta que "hijo" significa "descendiente inmediato", no cualquier descendiente. P SPAN es un selector descendiente , aplicando el estilo que sigue a todos SPAN etiquetas que son hijos de una etiqueta o de forma recursiva P niños de cualquier otra etiqueta que es un niño/descendiente de una etiqueta P. P > SPAN solo se aplica a las etiquetas SPAN que son hijos de una etiqueta P.

+4

Sin embargo, una nota de precaución: no es compatible con ie6 – wheresrhys

+19

@wheresrhys historia de mi vida ...... :) –

8

Esto se conoce como un Combinator niño: selector combinator

Un niño se añadió para poder peinar el contenido de elementos contenidos dentro de otros elementos especificados. Por ejemplo, supongamos que uno desea establecer el color blanco como el color de los hipervínculos dentro de las etiquetas div para una cierta clase porque tienen un fondo oscuro. Esto se puede logra mediante el uso de un período a combinar div con los recursos de clase y un signo mayor que como un combinador combinar el par con una, como se muestra a continuación:

div.resources > a{color: white;} 

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

102
p em 

coincidirá con cualquier <em> que está dentro de un <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 otro lado,

p > em 

sólo coincidirá con <em> s que son hijos inmediatos de <p>. Por lo que coincidirá:

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

Pero no:

<p><strong><em>foo</em></strong></p> 
+4

Ejemplo agradable y claro. aunque la respuesta de tpdi fue útil, esta realmente lo hizo más fácil de entender. –

+2

Explicación mucho más clara que la respuesta aceptada – Novocaine

Cuestiones relacionadas