标签按HTML中从上到下顺序加载，后引入样式覆盖同权重前序样式；重置样式须置首，组件库次之，项目变量居中，页面样式置尾；@import阻塞解析且优先级仅取决于其在文件中的位置。
多个 <link> 标签的加载顺序直接影响样式优先级
浏览器按 HTML 中 <link rel="stylesheet"> 出现的**从上到下顺序**解析和应用 CSS，后引入的样式会覆盖前面同选择器、同权重的声明。这不是“谁更高级”，而是“谁最后写谁生效”。
常见错误：把重置样式 reset.css 放在业务样式之后，结果重置被业务样式覆盖，失去作用。
- 基础层（如
reset.css或normalize.css）必须放在最前 - 通用组件库（如
element-ui.css）紧随其后 - 项目全局变量/工具类（如
variables.css、utils.css）放在组件库之后、页面样式之前 - 页面或模块专属样式（如
home.css）放最后
同名选择器冲突时，CSS 优先级规则仍起作用
即使顺序靠后，如果新样式的选择器权重更低，依然可能被前面高权重的规则压制。比如：
/* a.css */
#header .nav li a { color: red; }
<p>/<em> b.css（后引入） </em>/
.nav li a { color: blue; }b.css 虽然后加载，但选择器权重低于 a.css，最终链接仍是红色。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的
Computed面板看哪条规则生效、为什么被覆盖 - 避免滥用
!important—— 它会破坏可维护性，且多个!important之间仍要按优先级和顺序比对 - 组件库自带的样式常带高权重（如内联
style或 ID 选择器），改它不如用更高权重的选择器覆盖，或通过:where()/:is()降权
使用 @import 引入时需格外小心顺序和性能
@import 是 CSS 内部引入机制，但它会**阻塞后续样式的解析**，且优先级仅由所在样式表的位置决定，不改变原始文件内的规则顺序逻辑。
- 不要在主样式表末尾用
@import加载关键样式 —— 它会延迟渲染 -
@import的优先级等同于它在当前文件中出现的位置，不是被导入文件的物理位置 - 现代项目尽量用
<link>替代@import，构建工具（如 Webpack、Vite）也默认不推荐@import多文件场景 - 如果必须用，确保
@import语句本身位于目标样式表顶部，否则可能被前面声明干扰
构建阶段合并或作用域隔离可一劳永逸
手动调顺序只能缓解问题，无法根治。真正可靠的方案是在工程化层面切断样式污染链。
- 使用 CSS Modules（如
Button.module.css），让类名自动加哈希，天然隔离 - Vue 的
<style scoped></style>或 React 的 emotion/styled-components，通过属性选择器或运行时注入实现作用域 - 构建时用 PostCSS 插件（如
postcss-prefix-selector）为整个文件加前缀，适合老项目渐进改造 - 提取公共原子类（如
mt-4、text-center）到独立文件，并确保它永远在最前加载
顺序和优先级是 CSS 的底层逻辑，但依赖它们来“猜”样式是否生效，本质上是在对抗设计意图。真正难处理的，往往是没被意识到的隐式继承和未声明的默认值。
