sostituendo gli stili css con @import che non funziona

Ho visto alcune domande simili sugli stili di override con @import, le persone suggeriscono di mettere @import in fondo, ma sembra che non funzioni qui.sostituendo gli stili css con @import che non funziona

--- 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;}

L'esempio seguente output rosso testo, mentre verde è previsto.

Dichiarare stile-override.css dopo style.css nella testa risolverà il problema, ma voglio usare @import all'interno un file CSS.
Aggiunta ! Importante in stile-override.css riceverà anche il risultato atteso, ma che non è il modo in cui dovrebbe funzionare.

Qualcuno può spiegare questo?

fonte

2012-09-08 user1643156

Questo non funziona perché qualsiasi regola di importazione dichiarata all'interno di un foglio di stile deve precedere tutto il resto, altrimenti ... beh, non funziona;).

Quindi, ciò che si dovrebbe avere nel vostro foglio di stile style.css è:

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

fonte

2012-09-08 11:23:03 banzomaikaka

OK, anche se @import è dichiarato in fondo, verrà eseguito per primo, credo. In realtà ho appena letto che su un sito web. Sembra che dichiarare css in testa o aggiungere! Importanti siano gli unici modi. Grazie. – user1643156

Oh sì, ovviamente. Non ci stavo nemmeno pensando. Le regole importate sono ancora sovrascritte, poiché in questo caso 'body {color: red;}' viene dopo. – banzomaikaka

@import regole devono essere al top . Questo è ciò che il CSS spec. dice a questo proposito:

Tutte le regole @import deve precedere tutti gli altri a-regole e le regole di stile in un foglio di stile (oltre @charset, che deve essere la prima cosa nel foglio di stile se esiste), altrimenti la regola @import non è valida.

fonte

2014-06-24 15:37:51 luissquall

sostituendo gli stili css con @import che non funziona

risposta

Problemi correlati