为何@import放在主CSS文件末尾时无法生效？

问题描述 #

最小可复现示例 #

index.html

<head> <link rel="stylesheet" href="main.css"> </head>
<p> This is a test </p>

main.css

p {color:purple;}
@import "background.css";

background.css

p {background-color:yellow;}

在Vivaldi和Firefox中测试时，background.css中的样式并未生效。但调换main.css中的两行顺序，先写@import "background.css";再写p {color:purple;}，样式就能正常生效。为什么顺序会有影响？无论顺序如何，background.css的样式都应该被应用才对？

注：此问题与另外两个问题描述情况相同，但那些回答仅建议在HTML文件中按正确顺序导入，并未触及核心原因。

核心原因 #

这是因为CSS规范强制要求@import规则必须放在所有样式规则之前。

当你把@import写在p {color:purple;}这类样式规则之后时，浏览器会直接忽略这条导入语句——它根本不会去加载background.css，自然也就不会应用里面的样式。只有当@import位于所有样式规则的前面时，浏览器才会正常解析并加载对应的外部样式文件。

简单说，@import在CSS文件里有严格的位置限制，不能放在样式规则之后，否则会被判定为无效语句直接跳过。

内容的提问来源于stack exchange，提问作者Mike Pierce