CSS @import究竟如何工作？

Question

可以说，我已经定义在我的CSS类，在3个CSS文件有差异的定义... 在CSS1重复类名，我定义的宽度为10像素

CSS2中，我定义宽度20 PX

和CSS3中，我定义宽度30像素

在我的HTML文件，我呼吁/链接CSS1，这对于在顶部，这再次进口CSS3 CSS2进口..

所以我的问题是什么宽度将被应用，以及这个决定到底有多确切？

Answer 1

被最终采用的规则是

.myclass { width: 10px; } 

因为进口样式永远是第一位（在它们正在进口过程的顺序），然​​后得到由任何在样式表后进口来覆盖他们，所以级联的特异性同样规则的顺序是

1. css3.css
2. css2.css（覆盖规则进口css3.css）
3. 个css1.css（覆盖进口css2.css规则）

的“编译” CSS看起来像这样所以这是如何更清晰的规则级联：

.myclass { width: 30px; } /* From imported css3.css */ 
.myclass { width: 20px; } /* From imported css2.css, overrides css3.css */ 
.myclass { width: 10px; } /* From css1.css, overrides css2.css */ 

Answer 2

除了有多余的HTTP影响请求和缓存，@import就像将导入文件的内容放在@指令出现在导入文件中的位置。

cascade规则（包括特异性和来源顺序）然后按正常方式应用。