376
Por ejemplo:¿Qué significa el selector de CSS ">" (signo más grande)?
div > p.some_class {
/* Some declarations */
}
¿Qué significa exactamente el signo >?
A
Respuesta
560
> es el child combinator, a veces erróneamente llamado el combinador de descendientes directo.
Eso significa que el selector div > p.some_class solamente selecciona los párrafos de .some_class que están anidados directamente dentro de un div, y no cualquier párrafo que están anidados dentro de más.
Un ejemplo:
<div>
<p class="some_class">Some text here</p> <!-- Selected [1] -->
<blockquote>
<p class="some_class">More text here</p> <!-- Not selected [2] -->
</blockquote>
</div>
lo que está seleccionado y lo que no lo es:
Seleccionado
Estep.some_classse encuentra directamente dentro de ladiv, por lo tanto, se establece una relación padre-hijo entre ambos elementos.No seleccionado
Estep.some_classestá contenido por un dentro de ladiv, en lugar de ladivsí mismo. Aunque estep.some_classes un descendiente deldiv, no es un niño; es un nietoEn consecuencia, mientras que
div > p.some_classno coincidirá con este elemento,div p.some_classlo hará, usando el descendant combinator en su lugar.
Muchas personas van más allá de llamarlo "hijo directo" o "niño inmediata", pero eso es completamente innecesario (y muy molesto para mí), porque un elemento secundario es inmediata por definición de todos modos, por lo que significan exactamente lo mismo. No hay tal cosa como un "niño indirecto".
2
Todas las etiquetas p con la clase some_class que son hijos directos de una etiqueta div.
+0
no niños, niños directos – Imad
6
que coincide p elementos con clase some_class que son directamente bajo un div.
9
Como mencionan otros, es un selector para niños. Aquí está el enlace apropiado.
+0
¡Muchas gracias por el enlace! Descubrí también los "Selectores de hermanos adyacentes" allí. –
+0
Encontrará [soporte del navegador] (http://reference.sitepoint.com/css/childselector#compatibilitysection) en Sitepoint. No funciona en IE6 si es importante para tus proyectos, está bien en cualquier otro lugar. Este recurso es especialmente útil para hermanos,: nth-child() etc donde el soporte aún está incompleto – FelipeAls
1
html
<div>
<p class="some_class">lohrem text (it will be of red color)</p>
<div>
<p class="some_class">lohrem text (it will NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be of red color)</p>
</div>
div > p.some_class{
color:red;
}
Todos los hijos directos que son <p> con .some_class obtendría el estilo aplicado a ellos.
0
(selector de niños) se introdujo en css2. div p {} selecciona todos los elementos p decedent de elementos div, mientras que div> p selecciona solo elementos p secundarios, no grand child, great grand child, etc.
<style>
div p{ color:red } /* match both p*/
div > p{ color:blue } /* match only first p*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</div>
Para obtener más información sobre CSS Ce [lectores y su uso, lee mi blog, css selectors y css3 selectors
7
> (signo mayor que) es un combinador CSS.
Un combinador es algo que explica la relación entre los selectores.
Un selector CSS puede contener más de un selector simple. Entre los selectores simples, podemos incluir un combinador.
Hay cuatro combinadores diferentes en CSS3:
- descendiente selector (espacio)
- selector de hijo (>)
- selector de hermanos adyacentes (+)
- interruptor general de hermanos (~)
Nota:< no es válido en CSS selectores
Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
de salida:
Cuestiones relacionadas
- 1. ¿Qué significa ">" en CSS?
- 2. ¿Qué significa el símbolo '>' en css?
- 3. C++ ¿Qué significa el signo de porcentaje?
- 4. ¿Qué significa el signo "|" en Python?
- 5. ¿Qué significa el signo '#' en JavaScript?
- 6. ¿Qué significa * display en CSS?
- 7. ¿Qué significa el operador>? =?
- 8. ¡Qué hace! (doble signo de exclamación) significa?
- 9. ¿Qué significa el signo $ en Jquery o JavaScript?
- 10. ¿Qué significa el signo de interrogación al final de un css incluyendo url do?
- 11. ¿Qué significa un "?" significa símbolo (signo de interrogación) en Scala?
- 12. ¿Qué significa "->"?
- 13. ¿Qué significa "*" en CSS?
- 14. ¿Qué significa + en CSS?
- 15. selector de jQuery contiene signo igual
- 16. ¿Qué significa el símbolo '/' en el CSS
- 17. Groovy, ¿qué significa ->
- 18. ¿Qué significa el signo de interrogación en esta función?
- 19. ¿Qué significa el signo de dólar en PHP?
- 20. ¿Qué significa el signo de porcentaje en PHP?
- 21. ¿Qué significa el signo de porcentaje en Python 3.1
- 22. ¿qué significa el signo de dólar en objetivo-c?
- 23. ¿Qué significa el operador del signo de interrogación en Ruby?
- 24. ¿Qué significa el signo de interrogación en GSP/Grails?
- 25. ¿Qué significa <>?
- 26. ¿Qué significa '=>'?
- 27. ¿Qué significa() => {}?
- 28. ¿Qué significa '>>>' en javascript?
- 29. css El selector secundario (>) no funciona en IE8?
- 30. ¿Qué significa "+ =" (más igual)?
+1 ¿Se llama realmente un * selector de niños *? Si es así, eso es bastante engañoso. Pensaría que '# algo 'a' sería un selector de niños. – alex
@alex: [sí] (http://www.w3.org/TR/CSS2/selector.html#child-selectors) :) '#something a' podría significar que' a' es un nieto o nieto grandioso^n de '# algo' (no tiene en cuenta la profundidad de anidación). – BoltClock
Bueno, quiero decir que todavía es un niño ... un nieto tal vez: P – alex