nuevos - Selectores de CSS,> versus espacio

selector de hijos css

Question

¿De qué sirve usar esta sintaxis?

div.card > div.name

¿Cuál es la diferencia entre esto

div.card div.name

Answer 1

> es el selector de niños. Especifica solo elementos secundarios inmediatos y no cualquier descendiente (incluidos nietos, bisnietos, etc.) como en el segundo ejemplo sin el > .

El selector de elementos secundarios no es compatible con IE 6 y versiones anteriores. Una gran tabla de compatibilidad está here .

Answer 2

A > B solo seleccionará B que son hijos directos a A (es decir, no hay otros elementos entremedio).

AB seleccionará cualquier B que esté dentro de A, incluso si hay otros elementos entre ellos.

Answer 3

div.card > div.name matches <div class=''card''>....<div class=''name''>xxx</div>...</div> pero no coincide <div class=''card''>....<div class=''foo''> ... <div class=''name''>xxx</div>..</div>....</div>

div.card div.name coincide con ambos.

Es decir, el selector > se asegura de que el elemento seleccionado en el lado derecho de > sea ​​un elemento secundario del elemento en su lado izquierdo.

La sintaxis sin el > coincide con cualquier <div class=''name''> que sea un descendiente (no solo un niño) de <div class=''card''> .