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

假设我在CSS中定义了一个类，在3个CSS文件中使用不同的定义重复该类名。。。 在Css1中，我将宽度定义为10px

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

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

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

---

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

最终应用的规则是

.myclass { width: 10px; }

因为导入的样式表总是排在第一位（当然是按照导入的顺序），然后被导入它们的样式表中后面的任何内容覆盖，所以同样特定的规则的级联顺序是

css3.css

css2.css（覆盖导入的css3.css中的规则）

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 */

---

除了额外HTTP请求和缓存的含义外，

@import

就像将导入文件的内容放在导入文件中@指令出现的位置一样

规则（包括特殊性和来源顺序）将正常应用