CSS @import究竟是如何工作的？

Question

假设我已经在我的CSS中定义了一个类，在3个带有diff定义的CSS文件中重复了类名... 在Css1中，我将宽度定义为10 px

在Css2中，我将宽度定义为20 px

在Css3中，我将宽度定义为30 px

在我的HTML文件中，我调用/ link css1，它在顶部有一个css2导入，再次导入css3 ..

所以我的问题是将应用什么样的宽度以及这个决定究竟是如何做出的？

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规则（包括特异性和来源顺序）然后照常应用。