Here's a minimal working example of what I'm experiencing:
index.html
<head> <link rel="stylesheet" href="main.css"> </head>
<p> This is a test </p>
main.css
p {color:purple;}
@import "background.css";
background.css
p {background-color:yellow;}
Trying this in Vivaldi and Firefox, the style in background.css isn't applied. Shouldn't it be though? If I swap the two lines in main.css, @importing background.css first, it does get applied. But why would this matter? Shouldn't background.css be applied in either case?
Note this is the same issue being described in this question and this question, but the answers there don't get at the heart of the question—they recommend importing in the correct order in the HTML file, bypassing this issue altogether.
CodePudding user response：
In CSS1, all '@import' statements must occur at the start of a style sheet, before any declarations. This makes it easy to see that rules in the style sheet itself override rules in the imported style sheets.
CodePudding user response：
A style sheet that is imported into another one has a lower ranking in the cascading order: the importing style sheet overrides the imported one. Programmers may recognize this as the same model as in Java, Modula, Object-Pascal, Oberon and other modular programming languages.
CodePudding user response：
In CSS1 you should put the @import function at the top of the document (but after any @charset declaration). The css syntax should be:(@import url|string list-of-mediaqueries;) For more information you can take reference from:css.W3Schools