硬加前缀会让第三方样式彻底失效，因为element plus、ant design等库的css规则强依赖原始类名结构和js动态添加的class，如.el-button.is-disabled或.el-select__popper，改名后js不生成新类、构建工具不注入新类名，导致所有动态样式失配。
为什么硬加项目前缀会让第三方样式彻底失效
直接把 .ant-btn 改成 .myapp-ant-btn 看似“隔离”，实则破坏所有依赖原类名的选择器链。Element Plus 的 .el-button.is-disabled、Ant Design 的 .ant-btn:focus-visible 都会失配；.el-select__popper 这类运行时由 JS 动态插入的容器，你根本没法提前写 .myapp-el-select__popper；Webpack CSS Modules 或 Vue <style scoped></style> 下，这个新类名压根不会注入 DOM——因为第三方组件自己没声明它。
用 wrapper block 做语义隔离（最稳妥）
不改第三方组件任何代码，只在外层 DOM 加一个带业务语义的容器：
- Vue 模板：
<div class="my-dashboard__date-picker-wrapper"><adatepicker></adatepicker></div> - CSS 必须写成：
.my-dashboard__date-picker-wrapper .ant-picker-input input（注意空格！不是.my-dashboard__date-picker-wrapper.ant-picker-input） - React + CSS Modules：用
:global(.ant-picker-input)显式透出类，再写样式 - Vue
<style scoped></style>：必须用:deep(.ant-picker-input)，否则作用域机制会截断匹配
当 wrapper 也不适用时，用属性选择器限定作用域
某些全局提示（如 $message）、老版本 UI 库不支持 classNamePrefix，也没法包裹 wrapper，就得靠属性选择器软拦截：
- 用
[class^="ant-"]（开头匹配），不用[class*="ant-"]（包含匹配），避免误伤content、plant等词 - 必须限定作用域：
.myapp-ui [class^="ant-"]，而不是裸写[class^="ant-"] - Webpack
css-loader开启modules: true时，需在文件顶部加注释：/* webpackMode: "global" */ - Vue
<style scoped></style>不支持属性选择器穿透，必须改用<style module></style>或显式写:global([class^="ant-"]) { }
加载顺序比 !important 还关键
很多人写了 !important 还是盖不过第三方样式，问题大概率出在加载顺序上：
- Vite/webpack 项目中，如果在
main.ts里先import 'element-plus/dist/index.css'，再import './style/index.css'，那你的样式永远在第三方后面，!important也白搭 - 检查入口文件中的
import顺序：第三方库 CSS 必须在你项目样式之前 - 打开 DevTools 的 Styles 面板，看目标样式是否被划掉；被划掉且来源是第三方 CSS 文件，基本就是顺序或权重问题
真正难的不是写出正确的选择器，而是守住「不碰第三方 class」这条线——一旦开始魔改类名，后续每次升级都得手动对齐结构，维护成本会指数级上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
