85
Cuál es el punto, con esta sintaxisselectores CSS,> frente espacio
div.card > div.name
¿Cuál es la diferencia entre este
div.card div.name
A
Respuesta
130
A > B solo seleccionarán B que son hijos directos a A (es decir, no hay otros elementos intermedios).
A B seleccionará cualquier B que esté dentro de A, incluso si hay otros elementos entre ellos.
0
div.card > div.name partidos <div class='card'>....<div class='name'>xxx</div>...</div> pero no coincide con <div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>
div.card div.name coincide con ambos.
Es decir, el selector de > se asegura que el elemento seleccionado en la parte derecha de la > es un niño immidiate 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'>.
+0
Sí, las respuestas que tardan más de 15 minutos no son válidas; -) –
6
> es el child selector. Especifica elementos solamente inmediatos niño y no cualquier descendiente (incluyendo nietos, abuelos nietos etc.) como en el segundo ejemplo sin la >.
IE 6 y versiones inferiores no son compatibles con el selector de elementos secundarios. Una gran tabla de compatibilidad es here.
+1
Esta respuesta necesita ser arreglada. '>' es el [selector de niños] (https://www.w3.org/TR/CSS2/selector.html#child-selectors);
+0
@SNag arreglado, no estoy seguro de lo que estaba pensando, ¡gracias! –
Cuestiones relacionadas
- 1. Selectores CSS negativos
- 2. selectores CSS: cómo seleccionar 'para' en CSS?
- 3. Combinar CSS selectores de atributos
- 4. Retire selectores CSS sin usar
- 5. separados por comas selectores CSS
- 6. CSS Child vs Descendant selectores
- 7. ¿Los selectores css de atributo de datos son más rápidos que los selectores de clase?
- 8. Especificar varios selectores de atributos de CSS
- 9. Número de selectores en un archivo css
- 10. Selectores de hermanos adyacentes CSS - Problema IE8
- 11. selectores css del lado del servidor
- 12. Caracteres especiales en los selectores CSS
- 13. ¿Hay selectores de CSS específicos para IE10?
- 14. Selectores CSS de entrada múltiple [tipo]
- 15. Coma en CSS, selectores múltiples que usan el mismo CSS
- 16. Selectores de hermanos adyacentes CSS, Safari y <nav> elementos
- 17. Espacio en disco anunciado frente a espacio en disco real
- 18. css espacio de navegación horizontal
- 19. Página frente a extensión frente a segmento frente a espacio de tabla
- 20. Compatibilidad del navegador de algún tipo de selectores css
- 21. ¿Herramienta para verificar los selectores de CSS no utilizados?
- 22. Sobrescribir los selectores de clase CSS sin! Important
- 23. CSS selectores de atributos: las normas sobre las cotizaciones
- 24. ¿Hay alguna ventaja al usar selectores muy específicos en CSS?
- 25. Si los selectores de CSS son por #id, ¿necesita delimitarlos?
- 26. selectores CSS en Javascript con todas las etiquetas H
- 27. ¿Cómo pruebo los selectores de CSS en JavaScript?
- 28. ¿Quitar selectores no utilizados en una hoja de estilo CSS?
- 29. Mejor referencia para las propiedades y selectores de JavaFX CSS
- 30. Cómo solucionar: IE6 no soporta CSS selectores "atributos"
Además de esta pregunta, ya que no era consciente de esto y podría ser utilizado para resolver un problema que tengo, ¿qué navegadores son compatibles con este tipo de selector? – Kyle
Es compatible con todos los navegadores actuales. IE obtuvo soporte en la versión 7: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#combinators –