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規則（包括特異性和來源順序）然後按正常方式應用。