CSS文件中引入另一CSS的运行原理及与HTML引入CSS的区别

@import 的实际运行逻辑 #

CSS文件内的@import不会在服务端完成文件合并，全程是浏览器侧的客户端行为，运行流程如下：

• 浏览器先拉取并解析入口CSS文件（你示例中的main.css）
• 解析到合法的@import规则时，会发起新的HTTP请求拉取被引入的CSS文件（你示例中的secondary.css）
• 被引入的CSS文件加载完成后，浏览器会将其所有样式规则，按照@import的书写顺序，插入到当前CSS文件@import语句的位置之后、当前文件后续自有规则之前，合并到全局样式渲染树中生效
• 注意：@import必须写在CSS文件所有普通样式规则的最前面，否则会被浏览器直接判定为无效规则忽略

CSS内@import 与 HTML中引入CSS的差异 #

两者本质最终都会把样式合并到浏览器的全局样式表，核心差异体现在加载逻辑和使用场景上：

• 加载性能差异：HTML中用<link>标签引入的CSS，会和HTML解析并行发起请求；而CSS内的@import必须等父CSS文件下载、解析到对应语句才会发起请求，属于串行加载，会拉长页面样式加载的总耗时
• 兼容性差异：@import在IE6/7等老旧浏览器下存在大量加载异常问题，比如无法并行请求、重复加载、样式顺序错乱等，<link>标签不存在这类兼容问题
• 功能灵活性差异：@import可以配合@layer、媒体查询实现CSS层面的条件引入、分层优先级管理，比如@import url("print.css") print; 可以限定仅打印场景生效，<link>虽然也支持媒体查询，但无法直接在CSS体系内完成分层样式管理
• 优先级逻辑：两种引入方式不影响最终样式优先级，最终优先级只和规则的特异性、合并到全局样式表的先后顺序有关，同特异性的规则，出现越晚优先级越高

你给出的示例运行效果 #

首先你的示例里@import语法存在错误，正确写法不需要冒号，应为@import "secondary.css"; 或@import url("secondary.css");，带冒号的写法会被浏览器判定为无效规则，不会触发引入逻辑。
如果修正为合法语法，最终浏览器生效的样式等效于：

p{color:red;}
body{ background:blue;}

最终页面效果为：

• 所有<p>标签的文字颜色为红色
• 页面body的背景色为蓝色
• 如果两个CSS存在同优先级的冲突规则，比如secondary.css也定义了body的背景色，main.css的body背景色会覆盖前者，因为合并后main.css的规则顺序更靠后

内容的提问来源于stack exchange，提问作者Navid Pourghanbari