使用@import覆盖CSS样式无效

Question

使用@import覆盖CSS样式无效

24

我看到一些关于使用@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-override.css声明在style.css之后可以解决这个问题，但我想在css文件内部使用@import。
在style-override.css中添加!important也会得到预期结果，但这不是应该的方式。

有人能解释一下吗？

- user1643156

2个回答

24

@import规则必须在顶部。这是关于它的CSS规范说的:

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

- luissquall

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- João Paulo Macedo · Accepted Answer

这不起作用是因为样式表中声明的任何导入规则都必须在其他所有内容之前进行声明，否则，它就无法工作；

所以，在你的style.css样式表中应该有：

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