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

Question

Lets say I have defined a class in my CSS, with the class name repeated in 3 CSS files with diff definitions... In Css1, i define width as 10 px

在 Css2 中，我將寬度定義為 20 px

在 Css3 中，我將寬度定義為 30 px

在我的 HTML 文件中，我調用/鏈接 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

除了對額外的@import請求和緩存的影響之外，@import 就像將導入文件的內容放在導入文件中出現 @ 指令的位置一樣。

級聯規則（包括特異性和源順序）然后照常應用。