HTML页面间无CSS继承关系，所谓“子页用父页样式”实为多页共引同一CSS文件；@import仅在CSS文件顶部有效，路径需相对当前CSS文件，现代项目应构建合并而非依赖@import。
子页面不继承父页面CSS的常见错觉
根本不存在“父页面CSS自动继承到子页面”这回事——HTML页面之间没有样式继承关系，只有单个HTML文档内部的DOM树才有层叠（cascade）行为。@import 也不是用来“让子页继承父页样式”的，它只是在当前CSS文件里引入另一份CSS内容。
所谓“子页面用父级样式”，实际是多个HTML文件都引用了同一份基础CSS（比如 base.css），或都通过 @import 加载了同一个框架配置文件。一旦漏引、路径错、加载顺序乱，样式就断了。
@import 在CSS中导入框架配置的正确写法
@import 必须写在CSS文件最顶部（所有规则之前），且只对当前CSS文件生效；它不能放在 <style></style> 标签中间，也不能写在HTML的 <link> 之后再起作用。
- ✅ 正确：在
page-a.css开头写@import url("framework.css"); - ❌ 错误：在
<style></style>块里写@import "framework.css";后面又跟body { ... }—— 浏览器会忽略整个块 - ⚠️ 注意：
@import是同步阻塞加载，会拖慢渲染；现代项目更推荐用<link rel="stylesheet">并行加载 - 路径必须相对于当前CSS文件位置，不是HTML文件位置。比如
css/page-a.css里写@import "../lib/framework.css"
为什么用 @import 加载 CSS 框架后样式没生效
最常见的三个原因：路径404、加载时机被覆盖、@import 被CSS预处理器意外转义。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器开发者工具的 Network 面板，看
framework.css是否返回 404 或 403 —— 这比猜“是不是语法错了”快得多 - 如果HTML里同时有
<link href="base.css">和<style>@import "framework.css";</style>，后者大概率失效，因为内联<style></style>不支持安全的@import - 用 Sass/Less 时，如果写了
@import "framework";（无后缀），而实际文件是framework.css，Sass 会把它当 Sass 文件处理，导致输出异常 - 某些构建工具（如 Vite）默认禁用 CSS 中的
@import，需显式开启css.preprocessorOptions配置
真正可靠的跨页面样式复用方式
别依赖 @import 做工程级样式共享。它脆弱、不可控、难调试。稳定做法是统一入口 + 构建时合并。
- 所有HTML页面都通过
<link rel="stylesheet" href="/assets/css/main.css">引入同一个构建产物 -
main.css由构建工具（Webpack/Vite/PostCSS）从index.css开始，递归解析@import或@use，最终输出扁平化CSS - 框架配置（如主题色、断点）抽成
:root变量或 CSS 自定义属性，在main.css最前面定义，全局可用 - 如果真要用
@import，只用于开发阶段的模块拆分，上线前必须构建合并，否则HTTP请求数和阻塞风险太高
路径错一次，@import 就静默失败；变量名拼错一个字母，主题色就全乱。这类问题不会报错，只会让你对着空白按钮发呆两小时。
