我看到了一些关于用@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也会得到预期的结果，但这不是它应该的工作方式。
有人能解释一下吗？
这不起作用，因为在样式表中声明的任何导入规则都必须先于其他规则-否则。。。嗯，它不起作用；）。
因此，在style.css样式表中应该有：
@import url('style-override.css');
body {color: red;}
@import规则必须位于顶部。这就是CSS规范所说的：
任何@import规则都必须在样式表中的所有其他at规则和样式规则之前（除了@charset之外，如果存在@charset，它必须是样式表中第一个），否则@import法则无效。