Importé otra hoja de estilo usando @import en el archivo de hoja de estilo principal. Me gustaría que los cambios que he realizado en la hoja de estilos @import reemplacen la hoja de estilos principal. es posible?¿Cómo obtengo mi hoja de estilo @import para anular la hoja de estilo principal?
Si su objetivo es anular los estilos importando otra hoja de estilo, debe usar el orden de precedencia.
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
Aquí el style.css es el original y style-override.css contendría su nuevo css personalizado. Estos estilos anularán los estilos desde style.css. Esto significa que no necesitará usar !important porque el estilo está sobrescrito.
Evita! Importante siempre que puedas.
Para hacer @import
<style type="text/css">
@import url("style.css");
@import url("style-override.css");
</style>
También como una nota al margen, si usted prefiere eliminar todos los estilos de la página, utilice un restablecimiento CSS.
<style type="text/css">
@import url("style.css");
@import url("reset.css");
@import url("style-override.css");
</style>
Salida un restablecimiento CSS en http://meyerweb.com/eric/tools/css/reset/ y añadirlo a reset.css.
esto funcionó gracias! – Kenshi
@import la segunda hoja de estilo al final de la primera.
Estás confundiendo !important y @import
Intenté agregar el @i mport al final ya no carga el CSS. No quiero usar! Importante porque tendría que hacer eso para que todo lo que quiero cambiar sea una manera más fácil. – Kenshi
Si su segunda hoja de estilo utiliza los mismos selectores, entonces se debe anular la primera sin ningún problema.
CSS tiene un orden de precedencia muy estricto para determinar cuál debe usarse, pero si todo lo demás es igual y dos estilos tienen exactamente el mismo nivel de precedencia, entonces usará el que se especificó al final. Esto le permite anular un estilo simplemente repitiendo el mismo selector más adelante.
La única excepción a esto es si el primer estilo se especificó como !important. En este caso, es mucho más difícil anularlo. Incluso especificar otro estilo como !important puede no funcionar siempre (he visto casos en los que funcionaba en algunos navegadores pero no en otros).
Así que si la hoja de estilo anterior usó !important, entonces puede tener problemas para anularla. Pero si no, debería ser bastante simple.
Esta solución funciona perfectamente para mí.
Haz una copia de main.css y cámbiale el nombre a style.css. En main.css suprimir todos y pasado:
@import url("style.css");
@import url("style-override.css");
Eso es todo.
También puede utilizar el nombre de clase más específica - por ejemplo, si desea cambiar
div#sample {
max-width: 75%;
}
el nuevo uso css
body div#sample {
max-width: 75%;
}
Hemos de tener en cuenta, que sobre calificados selectores no son los mejores idea;)
Haga el @import después de la hoja de estilo principal y usted debe estar bien –
Acabo de intentarlo y ahora ya no está cargando – Kenshi