最直接有效的办法是将项目主样式表放在所有第三方样式表之后引入，因为CSS中相同选择器的样式后加载的会覆盖先加载的；正确顺序为先第三方样式、再全局样式、最后页面专属样式。
第三方 CSS 样式覆盖项目样式，本质是 CSS 优先级和加载顺序问题。最直接有效的办法，就是调整 <link> 标签的引入顺序，让项目主样式表放在所有第三方样式表之后引入。
为什么引入顺序影响覆盖效果
CSS 中相同选择器的样式，后加载的会覆盖先加载的（前提是优先级相同）。浏览器按 HTML 中 <link> 出现的顺序依次解析和应用样式。所以即使第三方库的 CSS 文件体积大、选择器复杂，只要你的主样式表在它后面加载，且选择器权重不弱于它，就能生效。
正确引入顺序示例
在 <head> 中按如下顺序写：
- 先引入第三方样式（如 Bootstrap、Element UI、Ant Design 的 CSS）
- 再引入你项目的全局样式（如
base.css、reset.css） - 最后引入当前页面或组件专属样式（如
home.css）
<link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="element-ui.css"><link rel="stylesheet" href="base.css"><link rel="stylesheet" href="home.css">
配合使用更稳妥的技巧
仅靠顺序还不够？再加几条实践建议：
立即学习“前端免费学习笔记（深入）”；
- 避免滥用
!important，优先用提高选择器权重的方式覆盖，比如把.btn改成body .btn或.app-wrapper .btn - 对关键样式，可加唯一 class 做作用域隔离，例如给根容器加
class="my-app"，然后写.my-app .btn { ... } - 构建工具中（如 Webpack/Vite），确认 CSS 提取插件（如 mini-css-extract-plugin）未打乱顺序；检查最终生成的 HTML，确保 link 顺序符合预期
- 若用 CSS-in-JS 或 Scoped CSS（如 Vue 的
<style scoped>），天然具备隔离性，可减少全局冲突
检查是否生效的小方法
打开浏览器开发者工具（F12），在 Elements 面板选中目标元素，右侧 Styles 面板里看哪些样式被划掉（strikethrough）。没被划掉、且来源是你自己的 CSS 文件，说明已成功覆盖。
