1. 首頁
  2. 問答
  3. 與@import沒有工作

與@import沒有工作

2012-09-08 30 views
10

心中已經看到有關與@import覆蓋風格的一些類似的問題壓倒一切的CSS樣式，人建議把@import在底部，但似乎並不在這裏工作。與@import沒有工作

--- index.html --- 
<head> 
<link rel="stylesheet" href="style.css" /> 
</head> 
<body> 
This text should be green. 
</body> 

--- style.css --- 
body {color: red;} 
@import url('style-override.css'); 

--- style-override.css --- 
body {color: green;}

以上將輸出紅色文本的例子，而綠色預期。內部頭的style.css後

  • 聲明樣式override.css就能解決問題，但我想用@import 內一個CSS文件。

  • 在樣式override.css中加入！重要也會得到預期的結果，但這不是它應該工作的方式。

任何人都可以解釋這一點嗎？

來源

2012-09-08 user1643156

回答

22

這是行不通的，因爲樣式表內聲明的任何導入規則必須拿出高於一切 - 否則，......嗯，它不工作）。

所以，你應該在你的style.css樣式表：

@import url('style-override.css'); 
body {color: red;}

來源

2012-09-08 11:23:03 banzomaikaka

+0

OK，即使@import在底部宣佈，它將首先被執行，我猜。我其實只是在網站上閱讀。看來只要在頭腦中聲明css或添加！important是唯一的方法。謝謝。 – user1643156

+0

哦，是的，顯然。我甚至都沒有想過這個。導入的規則仍然被覆蓋，因爲在這種情況下，'body {color：red;}'在後面。 – banzomaikaka

12

@import規則必須在頂部。這就是CSS spec.說一下吧：

任何@import規則必須（先於其他所有的規則和樣式規則在樣式表中除@charset，它必須是在樣式表，如果它的第一件事存在），否則@import規則無效。

來源

2014-06-24 15:37:51 luissquall

相關問題

 相關問題