¿Hay una diferencia entre .class element
y element.class
en un selector de CSS? Siempre me habían mostrado element.class
pero el otro día encontré un archivo CSS en el trabajo que tenía .class element
y quería saber si esto era solo una elección de estilo (en cuyo caso yo haría que mis cambios coincidan), o si había un problema específico razón (en cuyo caso, no necesariamente me gustaría hacer coincidir mis cambios).¿cuál es la diferencia entre ".class element" y "element.class"?
Respuesta
element.class
selecciona todos <element />
s con esa clase. .class element
selecciona todos <element />
s que son descendientes de elementos que tienen esa clase.
Por ejemplo, en HTML:
<div class='wrapper'>
<div class='content'></div>
<div></div>
<div class='footer'></div>
</div>
Por ejemplo, CSS:
div.wrapper {
background-color: white; /* the div with wrapper class will be white */
}
.wrapper div {
background-color: red; /* all 3 child divs of wrapper will be red */
}
Así que si usamos este último podemos omitir un nivel y evitar más anidamiento, para mantenerlo simple. – FaithReaper
"element.class" selecciona los elementos que tienen la clase dada.
".class element" selecciona todos los elementos que son hijos de cualquier cosa con la clase dada.
Ejemplo:
<div class="foo">
<p>...</p>
</div>
div.foo
se seleccionaría el div, mientras .foo p
sería seleccionar el párrafo niño. Se debe tener en cuenta que sin especificar el elemento secundario directo a través del selector ">", esto recorrerá todo el árbol de documentos al buscar hijos.
ejemplo muy sencillo:
HTML:
<ul class="a">
<li>1</li>
<li class="a">2</li>
<li>3</li>
</ul>
CSS:
.a li{color:blue;}
li.a{color:red;}
¿Cómo es esto diferente/mejor que la [respuesta ya aceptada] (http://stackoverflow.com/a/6023440/215552)? –
Bienvenido a Stack Overflow. Antes de responder una pregunta, revise otras respuestas a la pregunta y solo proporcione una respuesta propia si tiene información para agregar que no haya sido proporcionada por otro afiche.En este caso, su respuesta no se consideraría muy valiosa ya que no ha explicado nada en absoluto, pero es especialmente atroz ya que hay una respuesta muy bien escrita de * hace cinco años * que ha sido aceptada y votada. – AmericanUmlaut
me gusta pensar de la siguiente manera:
1) a, b = a OR b
2) a b = a AND b (on that order)
3) a.b = a.b (on that order)
2, 3) ab no es lo mismo que b a.
2) elementos que pertenecen a un y b simultáneamente, es decir, ni un o b elementos. Es una selección de rango.
3) a elementos de b clase. Es una selección exacta.
- 1. iPhone SDK: ¿cuál es la diferencia entre #import y @class?
- 2. ¿Cuál es la diferencia entre Class y Klass en ruby?
- 3. ¿Cuál es la diferencia entre @class y import
- 4. Cuál es la diferencia entre Class Path y Build Path
- 5. ¿Cuál es la diferencia entre los archivos .class y .dex?
- 6. ¿Cuál es la diferencia entre los métodos element() y getFirst() en la clase LinkedList?
- 7. ¿Cuál es la diferencia entre # import y @class, y cuándo debo usar uno sobre el otro?
- 8. ¿Cuál es la diferencia entre " " y ""?
- 9. ¿cuál es la diferencia entre:.! y: r !?
- 10. ¿Cuál es la diferencia entre ".equals" y "=="?
- 11. Cuál es la diferencia entre = y: =
- 12. ¿Cuál es la diferencia entre [indefinido] y [,]?
- 13. ¿Cuál es la diferencia entre .ToString (+) y ""
- 14. Cuál es la diferencia entre $ (...) y `...`
- 15. ¿Cuál es la diferencia entre `##` y `hashCode`?
- 16. ¿Cuál es la diferencia entre + = y = +?
- 17. ¿Cuál es la diferencia entre dict() y {}?
- 18. Cuál es la diferencia entre $ y jQuery
- 19. ¿Cuál es la diferencia entre "$^N" y "$ +"?
- 20. ¿Cuál es la diferencia entre {0} y ""?
- 21. ¿Cuál es la diferencia entre getDeclaredConstructors y getConstructors en Class API?
- 22. ¿Cuál es la diferencia entre "plantilla <class T>" y "plantilla <typename T>"?
- 23. ¿Cuál es la diferencia entre GetHashCode implementado en Object y ValueType class?
- 24. Cuál es la diferencia entre functors y "genéricos"
- 25. Diferencia entre el objeto Node y el objeto Element?
- 26. diferencia entre java bean y java class?
- 27. ¿Cuál es la diferencia entre los nuevos Some :: Class y Some :: Class-> new() en Perl? Hace
- 28. ¿Cuál es la diferencia entre "Thread.currentThread(). GetName" y "this.getName"?
- 29. ¿Cuál es la diferencia entre mixins estáticas y rasgo dinámico
- 30. ¿Cuál es la diferencia entre .closest() y .parents ('selector')?
buena pregunta, también estoy confundido con estos productos ... – Jomia
yup .. buena pregunta. – mahela007