reemplazando estilos de CSS con @import no funciona

He visto algunas preguntas similares sobre la anulación de estilos con @import, la gente sugiere poner @import en la parte inferior, pero eso no parece funcionar aquí.reemplazando estilos de CSS con @import no funciona

--- index.html --- 
<head> 
<link rel="stylesheet" href="style.css" /> 
</head> 
<body> 
This text should be green. 
</body> 

--- style.css --- 
body {color: red;} 
@import url('style-override.css'); 

--- style-override.css --- 
body {color: green;}

El ejemplo anterior es la salida roja texto, mientras que verde se espera.

La declaración de estilo style.css override.css después dentro de la cabeza va a resolver el problema, pero quiero usar @import dentro un archivo CSS.
Añadiendo ! Important en style-override.css también obtendrá el resultado esperado, pero esa no es la forma en que debería funcionar.

¿Alguien puede explicar esto?

Fuente

2012-09-08 user1643156

Eso no funciona porque cualquier regla de importación declarada dentro de una hoja de estilo debe aparecer antes que cualquier otra cosa; de lo contrario, ... bueno, no funciona;).

Por lo tanto, lo que debe tener en su hoja de estilo style.css es:

@import url('style-override.css'); 
body {color: red;}

Fuente

2012-09-08 11:23:03 banzomaikaka

OK, incluso si @import se declara en la parte inferior, se ejecutará primero, supongo. De hecho, lo leí en un sitio web. ¡Parece que declarar css dentro de la cabeza o agregar! Importante son las únicas formas. Gracias. – user1643156

Oh sí, obviamente. Ni siquiera estaba pensando en eso. Las reglas importadas siguen anuladas, ya que, en este caso, viene 'body {color: red;}'. – banzomaikaka

@import reglas deben estar en la parte superior . Esto es lo que el CSS spec. dice al respecto:

Cualquier regla @import debe preceder a todos los demás en situación de normas y reglas de estilo en una hoja de estilo (además @charset, que debe ser la primera cosa en la hoja de estilos si existe), o la regla @import no es válida.

Fuente

2014-06-24 15:37:51 luissquall

reemplazando estilos de CSS con @import no funciona

Respuesta

Cuestiones relacionadas