22

我见过一些关于使用@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;}

上面的示例将输出红色文本，而预期为绿色。

  • 在 head 中的 style.css 之后声明 style-override.css 可以解决问题，但我想在css 文件中使用 @import。

  • 在 style-override.css 中添加!important也会得到预期的结果，但这不是它应该工作的方式。

谁能解释一下？

4

2 回答 2

51

这是行不通的，因为在样式表中声明的任何导入规则都必须在其他所有内容之前 - 否则，......好吧，它不起作用;)。

因此，您的 style.css 样式表中应该包含的内容是：

@import url('style-override.css');  
body {color: red;}
于 2012-09-08T11:23:03.553 回答
21

@import规则必须在顶部。这就是CSS 规范。说：

任何@import 规则必须在样式表中的所有其他at 规则和样式规则之前（除了@charset，如果它存在，它必须是样式表中的第一件事），否则@import 规则无效。

于 2014-06-24T15:37:51.007 回答