最常见原因是:deep()未与外层选择器组合使用，必须依附于当前组件内真实存在的选择器（如.my-form :deep(.el-input__inner)），单独书写会被编译丢弃。
直接加 body 前缀或盲目用 !important 多数时候压不住第三方样式，真正起效的是“作用域锚点 + 穿透选择器 + 加载顺序控制”三者配合。
为什么 :deep() 写了却没生效
最常见原因是它被单独写在 <style scoped> 里，没有外层选择器作为作用域锚点。Vue 3 的 :deep() 不是全局开关，它必须依附于一个当前组件内真实存在的选择器，否则编译后会被丢弃。
-
:deep(.el-button__inner)单独写 → 编译后消失，不生成任何 CSS 规则 -
.my-form :deep(.el-input__inner)→ 正确，.my-form是你组件内的容器类，确保规则只作用于该上下文 - 如果第三方组件用了动态类名（比如
v-bind:class="['el-input', inputSize && `el-input--${inputSize}`]"），得在 DevTools 里 inspect 真实渲染出的 class，不能凭文档瞎猜 -
:deep()里不支持空格分隔的复合选择器，:deep(.el-input .el-input__inner)会失效；只能写:deep(.el-input__inner)
第三方样式后加载导致覆盖失败
CSS 优先级相同时，后加载的样式胜出。Tailwind 的 @tailwind base 和 Element Plus 的 CSS 如果都走 main.js 全局导入，顺序就决定谁赢——但 Vite 的 HMR 和打包策略会让这个顺序在热更新时变得不稳定。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 把 Element Plus 的 CSS 导入挪到
main.js最末尾，比 Tailwind、重置样式、自定义全局 CSS 都靠后 - 禁用 Tailwind 的 preflight（在
tailwind.config.cjs中设corePlugins: { preflight: false }），避免它给button、input等基础标签强加默认样式 - 若使用
vite-plugin-css-prefix给第三方 CSS 自动加业务前缀，注意exclude已有前缀的规则，否则.el-button可能变成.my-app .el-button，而.my-app .el-button.is-disabled就被漏掉了
遇到内联样式、Shadow DOM 或 iframe 怎么办
这三类情况，CSS 选择器再强也无效：style="color: red" 权重是 1000；Shadow DOM 默认封闭；iframe 是独立文档上下文。
立即学习“前端免费学习笔记（深入）”；
- 内联样式：用
element.style.setProperty('color', 'blue', 'important')强制改，配合$nextTick或MutationObserver监听元素挂载 - Shadow DOM（如某些 Web Components 封装的 UI 库）：查文档是否支持
::part()伪元素，例如my-date-picker::part(trigger) { border: 1px solid #1890ff; } - iframe（如 TinyMCE、PDF 查看器）：不能从主页面 CSS 注入，必须走插件配置项，比如 TinyMCE 的
content_style或content_css
最常被忽略的一点：打开 DevTools 的 Styles 面板，先确认目标样式是不是被划掉；如果没被划掉，只是视觉没变，大概率是 display 被重置、transform 偏移、或属性本身不继承（比如 color 继承但 background 不继承）。权重只是第一关，别卡死在这里。
