Selectores CSS Hijo vs Descendiente

Sí, tienes razón. div p coincidirá con el siguiente ejemplo, pero div > p no.

<div><table><tr><td><p> <!...

El primero se llama descendiente selector y el segundo se llama selector de hijo.

Bascailly, "b" selecciona todos los b dentro de a, mientras que "a>b" selecciona b lo que son los niños a los un, no seleccione b ¿cuál es hijo de b ¿cuál es hijo de un.

Este ejemplo ilustra la diferencia:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

Color de Fondo de abc y def será verde, pero ghi tendrá color de fondo rojo.

IMPORTANTE: Si cambia el orden de las reglas a:

div>span{background:green}
div span{background:red}

Todas las letras tendrán un fondo rojo, porque el selector descendiente también selecciona el secundario.

Tenga en cuenta que el selector hijo no es compatible con Internet Explorer 6. (Si usa el selector en un selector jQuery/Prototype/YUI etc en lugar de en una hoja de estilo, todavía funciona)

En teoría: Child = > un descendiente inmediato de un antepasado (por ejemplo, Joe y su padre)

Descendant = > cualquier elemento que desciende de un ancestro en particular (por ejemplo, Joe y su tatarabuelo)

En la práctica: pruebe este HTML:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

Con este CSS:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

Http://jsfiddle.net/X343c/1 /

div p 

Selecciona todos los elementos ' p 'donde el padre es un elemento' div '

div > p

Significa hijos inmediatos Selecciona todos los elementos ' p 'donde el padre es un elemento' div '

La selección de CSS y la aplicación de estilo a un elemento en particular se pueden hacer a través del elemento dom [Ejemplo

Ejemplo

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>