The analysis of @import and Link's weights in the introduction of CSS Files

I seldom use the @import tag in CSS, recently saw a word "link style weight is higher than the weight of @import", feel not right, @ Import is just an introduction to external files, how can there be higher than the weight of link? So I am more lazy, directly in a static page test, respectively, put @import style in front of link and behind the test, the results found that the front is covered by the link behind, that is, this statement is wrong.

Thus the conclusion (only the precedence of the style file in HTML) is reached:

1. @importInline styles > Import styles when combined with inline styles
2. In addition to the first case, other times with the style loading order as a reference, the post-load priority is higher (the recent precedence principle)

Finally, in fact, this kind of @import file import way has been very seldom used, personal advice to use the link way.

The reason is that link loading is loaded synchronously with the loading of the HTML, and @import is referenced after the page content is loaded. If the network speed is slow, it may cause the page style confusion.

In addition, when using @import, you should pay attention to adding places, which are mentioned in the CSS manual:

1. The rule must be declared first in the style sheet header. And then the semicolon is required, and if this semicolon is omitted, the external style sheet will not be imported correctly and an error message will be generated.
2. IE cannot introduce more than 35 style sheets using @import.

The analysis of @import and Link's weights in the introduction of CSS Files