四种css引入方式可混用，但优先级固定为：内联样式 > /（同级，后出现者覆盖）> @import；@import须在首行且不可与规则并存，否则失效。
可以，而且很常见——但必须清楚每种方式的加载时机、优先级和副作用，否则容易出现样式不生效或覆盖混乱。
四种引入方式能混用，但优先级固定
HTML 中支持内联、<style></style>、<link> 和 @import 四种 CSS 引入方式，它们可以共存于同一页面，但浏览器按固定顺序解析和应用样式：
- 内联样式（
style属性）优先级最高，会覆盖其他所有来源 -
<style></style>块和<link>引入的外部 CSS 优先级相同，以 DOM 中出现顺序为准（后声明的规则覆盖先声明的同名属性） -
@import必须写在<style></style>内部且必须是第一条语句，否则被忽略；它引入的样式优先级等同于所在<style></style>块，但加载是异步延迟的
<link> 和 @import 别混在同一个 <style></style> 里
这是新手常踩的坑：@import 只能在 <style></style> 标签内部使用，且不能和普通 CSS 规则并列写——一旦有其他声明（哪怕只是注释），@import 就失效。
- ✅ 正确：
<style>@import "base.css";</style> - ❌ 错误：
<style>/* reset */ @import "base.css"; p { margin: 0; }</style>—— 此时@import被完全忽略 - ⚠️ 更糟的是：
<style>@import "base.css"; @import "theme.css";</style>—— 第二个@import不会报错，但实际只加载第一个
多个 <link> 的顺序直接影响样式覆盖结果
浏览器按 HTML 中 <link> 出现的顺序依次请求并解析 CSS 文件，后加载的 CSS 中同名规则会覆盖前面的。这个顺序不是“谁写在后面谁赢”，而是“谁先被 parser 遇到谁先执行”。
- 基础重置（如
reset.css）必须放在最前 - 组件库（如
bootstrap.css）紧随其后 - 业务样式（如
app.css）放最后，才能可靠覆盖前两者 - 如果用 JavaScript 动态插入
<link>，它的顺序取决于插入时机，可能晚于 DOM 解析完成，导致闪屏或样式错乱
内联样式看似方便，实则破坏可维护性
虽然 style="color: red" 能立刻生效，但它绕过了所有 CSS 优先级机制，且无法被 :hover/:focus 等伪类扩展，更难调试。
- 调试时 Chrome DevTools 会显示该样式来自 “element.style”，但不会告诉你它在哪段 JS 或模板里生成的
- 若同时存在
!important和内联样式，内联仍胜出——这会让团队协作时的样式排查变得不可预测 - 服务端渲染或框架（如 React/Vue）中，过度依赖内联样式会导致 SSR 和 CSR 渲染结果不一致
真正麻烦的不是能不能混用，而是混用之后谁控制了最终渲染结果——尤其是当 @import 加载慢、<link> 被 preload 干扰、或内联样式由第三方脚本注入时，样式层就变成了时间竞态场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
