css中的import规则用于在一个样式表中引入另一个样式表的内容，是前端样式模块化开发时常用的功能，合理使用可以减少样式文件的重复编写，提升样式代码的可维护性。
import规则的基本语法
import规则的语法格式为@import后面跟上要引入的样式表路径，路径可以用字符串包裹，也可以使用url()函数包裹，两种写法都是正确的。
基础示例如下：
/* 使用字符串包裹路径 */ @import "reset.css"; /* 使用url函数包裹路径 */ @import url(base.css);
import规则的使用注意事项
放置位置要求
import规则必须放在样式表的最前面，也就是所有其他规则之前，不能放在普通样式规则后面，否则浏览器会忽略该import规则，导致样式引入失败。
错误示例：
/* 错误写法，import放在了普通样式后面 */
body {
margin: 0;
}
@import "reset.css";
正确示例：
/* 正确写法，import放在最前面 */
@import "reset.css";
body {
margin: 0;
}
路径写法规范
引入路径可以使用相对路径和绝对路径，相对路径是相对于当前样式表文件的位置，绝对路径是完整的网络地址或者站点根目录路径。
/* 相对路径，引入当前目录下的common文件夹里的layout.css */ @import "./common/layout.css"; /* 绝对路径，引入站点根目录下的global.css */ @import "/global.css"; /* 网络地址路径 */ @import "https://ipipp.com/static/theme.css";
媒体查询适配
import规则支持添加媒体查询条件，只有满足对应媒体条件时才会加载引入的样式表，适合做响应式样式的按需加载。
/* 屏幕宽度小于768px时加载移动端样式 */ @import "mobile.css" screen and (max-width: 768px); /* 打印时加载打印专用样式 */ @import "print.css" print;
import和link标签的区别
很多开发者会混淆import规则和link标签的作用，两者的核心区别如下：
| 对比项 | @import规则 | link标签 |
|---|---|---|
| 加载时机 | 页面加载完成后才会加载引入的样式，可能导致样式闪烁 | 页面加载时同步加载样式，无闪烁问题 |
| 兼容性 | IE5及以上支持，老版本浏览器兼容性稍差 | 所有浏览器都支持，兼容性更好 |
| 功能范围 | 只能引入css样式表 | 可以引入样式、图标、预加载资源等多种内容 |
| js控制 | 无法通过js动态修改引入的样式表 | 可以通过js动态修改href属性控制引入的样式 |
常见问题说明
如果引入的样式文件没有生效，可以先检查import规则是否放在了样式表最前面，再检查路径是否正确，还要注意是否有媒体查询条件不满足的情况。
另外import规则引入的样式表也会遵循css的层叠规则，后引入的样式如果选择器和优先级相同，会覆盖前面引入的样式内容。
css_import样式引入前端样式import规则修改时间：2026-07-18 22:03:21