调整引入顺序常无效，因构建工具打乱注入顺序且弹窗类组件默认挂载到body，脱离样式作用域；应优先检查DevTools的Computed面板定位真实问题根源。
为什么调整引入顺序经常不管用
你以为把自定义 CSS 放在 element-plus/dist/index.css 后面就万事大吉？现实是：Vite/Webpack 会打乱实际注入顺序，最终 <link> 标签顺序和你写的 import 顺序不一致。更麻烦的是，像 Modal、Tooltip 这类组件默认 append 到 document.body，根本不在你写的容器里，再靠后加载也匹配不到。
检查方式很简单：打开 DevTools → 选中元素 → 看「Computed」面板里那条被划掉的样式来自哪个文件；再点进「Styles」，确认它是不是出现在你自己的 CSS 文件之后——如果还在，说明不是顺序问题，是权重或作用域失控。
- 第三方库用了
!important（比如 Bootstrap 5.3+ 的:focus-visible规则），你加一个，它可能加两个 - JS 动态插入的节点脱离了你的命名空间，
.my-app .btn压根选不到body里的弹窗按钮 - 某些 UI 库（如 MUI）class 名哈希化（
css-1a2b3c），你写的.MuiButton-root升级后直接失效
提升选择器权重比 !important 更可控
!important 是全局插队，容易污染后续调试。一旦第三方也用 !important（比如某些弹窗组件），你就得再加一层，陷入死循环。而提升权重只在局部起效，DevTools 的「Computed」面板能清晰显示「.page-main .btn 赢了 .el-button」，逻辑可追溯。
权重是四元组 (a,b,c,d)，.btn 是 (0,0,1,0)，form.login-form input[type="text"] 就是 (0,0,1,1)，稳压前者。ID 选择器（如 #header .btn）权重是 (0,1,1,0)，但 Vue/React 动态 ID 不稳定，慎用。
- 别猜权重，直接看 DevTools 「Computed」→ 找生效样式 → 针对性加一层，比如
.card[data-type="featured"] .title - 发现样式根本没出现在「Styles」面板？说明选择器没匹配上——检查是否用了
scopedstyle、CSS Modules，或 class 拼错了 -
:where()和::is()不增加权重，别指望靠它们提权
Tailwind 的 preflight 是真·隐藏 Boss
Tailwind 的按钮变透明、输入框边框消失，往往不是类名冲突，而是 @layer base（即 preflight）直接重置了 button、input 等标签样式：button, [type='button'] { background-color: transparent; }。这条规则不靠类名触发，所以加 prefix、改 class 顺序、甚至用 el-button 包裹都无效——它天生就比 .el-button--primary 这类类选择器“早一步生效”。
解决路径很明确：关 preflight + @layer base 精准接管 > 局部 important: '#app' > prefix 防类名污染。注意 important: true 是布尔值，写成 important: "true" 或其他字符串都无效。
- 检查 DevTools 的「Styles」面板，找带
data-tailwind="true"的button规则，确认是不是 preflight 在起效 - 禁用 Tailwind 后按钮是否恢复正常？能快速验证是不是 preflight 冲突
- 全局开启
important: true后，!text-sm这种局部微调会失效——因为所有工具类已带!important，!text-sm !important语法非法
动态组件必须显式指定 container
Modal、Tooltip、Popover 默认 append 到 document.body，脱离你的样式容器。这不是 Bug，是设计使然。你不告诉它往哪塞，它就自己跑到全局去，你的 .my-app .btn 自然失效。
Bootstrap 初始化时传 { container: '.my-bs' }；Element Plus 的 ElTooltip 支持 popper-options 配置；Ant Design 的 Tooltip 有 getPopupContainer 属性。Vue 组件还支持 data-container=".my-app" 这类属性写法。
- 不要依赖 JS 自动查找容器，显式传参最可靠
- Shadow DOM 场景下，普通 CSS 选不到内部内容，得用
::part()或:host覆盖 - 内联样式优先级高于所有外部 CSS（包括
!important），必须用element.style.color = 'red'或setAttribute('style', 'color: red !important')
真正卡住人的地方，往往不是“怎么写”，而是“没意识到 preflight 在背后重置标签”或者“忘了 Tooltip 默认飞到 body 里”。DevTools 的「Computed」面板多点两下，比翻文档快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
