调整引入顺序能解决第三方库样式冲突，因为CSS层叠规则中后加载且权重相同的样式会覆盖先加载的样式；需将自定义CSS放在所有第三方库CSS之后，并通过开发者工具验证是否被划掉。
为什么调整引入顺序能解决第三方库样式冲突
CSS 的层叠规则（Cascading）决定了后加载的样式会覆盖先加载的同名规则，前提是选择器权重相同。很多第三方库（比如 bootstrap、element-plus、ant-design）自带全局重置或基础组件样式，如果它们在你自定义样式之后加载，你的 .btn 或 body 设置就可能被覆盖。
怎么确认是引入顺序问题而不是权重问题
打开浏览器开发者工具，选中一个异常元素，在 Computed 面板里看某条样式（比如 color）来自哪个文件；再点开 Styles 面板，观察该规则是否被划掉（strikethrough）。如果被划掉，且来源是第三方 CSS 文件，而你的样式文件也在列表里但没生效——大概率是它被后加载的第三方样式压住了。
- 检查 HTML 中
<link>标签顺序：你的定制 CSS 应该放在所有第三方库 CSS 之后 - 如果是构建工具（Vite / Webpack），确认
import语句顺序：import './styles/index.css';必须在import 'element-plus/dist/index.css';之后 - Vue 单文件组件中
<style></style>是局部作用域，不会参与全局层叠，别误以为它能覆盖外部库的全局样式
引入顺序调好还是有冲突？检查这几个地方
顺序只是基础，真正容易踩坑的是这些隐性因素：
-
!important：第三方库如果大量使用，你的普通声明根本压不住，得用!important回击（不推荐，但有时不得不） - 选择器权重差异：比如第三方用
button.btn.primary（权重 0,0,3,0），你只写.btn（0,0,1,0），即使后加载也赢不了 - CSS in JS 库（如
styled-components）或 Shadow DOM 场景下，层叠规则不适用，顺序无效 - Vite 的
css.preprocessorOptions或 Webpack 的mini-css-extract-plugin可能打乱实际输出顺序，需检查最终生成的index.css
/* 正确的 HTML 引入顺序示例 */ <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="node_modules/element-plus/dist/index.css"> <link rel="stylesheet" href="/src/assets/styles/main.css"> /* 你的样式必须放最后 */
复杂点在于：有些库（比如 tailwindcss）依赖 PurgeCSS 清理未用样式，如果你的定制类名没被扫描到，就算顺序对也白搭；还有些 UI 库提供「CSS variables 主题方案」，这时该优先用变量覆盖而非硬写样式。顺序只是第一道防线，不是银弹。
立即学习“前端免费学习笔记（深入）”；
