直接写 .el-button 无效是因为 Vue 的 <style scoped> 编译后会为选择器添加属性哈希（如 [data-v-abc123]），而 Element Plus 的 DOM 节点无此属性，导致不匹配；React 的 CSS Modules 同理，.el-button 被编译为局部哈希类名，无法选中第三方组件内部节点。
为什么直接写 .el-button 无效
Vue 的 <style scoped> 编译后会给选择器加属性哈希（如 [data-v-abc123]），而 Element Plus 这类库的 DOM 节点没有这个属性，自然不匹配。React 的 CSS Modules 同理：.el-button 被编译成局部类名，根本选不到第三方组件内部节点。
常见现象：DevTools 里看到样式被划掉，来源是 element-plus/dist/index.css，但你写的规则压根没出现在 Styles 面板里——不是写错了，是压根没进浏览器计算链。
-
:deep(.el-button__inner)必须嵌套在外层选择器下，比如.my-form :deep(.el-button__inner)，单独写顶层会被丢弃 - 目标元素在
<teleport>或<el-dialog>内？DOM 已脱离当前组件树，:deep()失效，得提至全局样式或改用:global() - 动态类名（如
el-input--large）要 inspect 实际渲染出的 class，别照文档硬写
加载顺序和特异性才是胜负手
哪怕你写了 !important，如果组件库 CSS 在你的样式之后加载，照样被覆盖。浏览器只认“最后定义 + 最高特异性”。
- 确保自定义 CSS 在
main.ts中 import 得比组件库更晚，例如：import 'element-plus/dist/index.css'→import './styles/index.css' - 优先组合组件库原生类名：
.el-button.my-primary比.my-primary权重高、更稳定——只要库还挂el-button类，你的样式就还在 - 避免用 ID 或内联 style：
id="btn"权重虽高，但不可复用、难测试，且组件库升级加了!important可能反向压制你
Tailwind 用户特别注意 preflight 的真实影响
Tailwind 的按钮变透明、输入框边框消失，根本不是类名冲突，而是 @layer base（即 preflight）直接重置了 button 标签样式：button { background-color: transparent }。它不靠类名触发，所以加 prefix、改 class 顺序都无效。
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 的 Styles 面板，找带
data-tailwind="true"的button规则，确认是不是preflight在起效 -
important: true是唯一能压过preflight的配置，但它会让所有工具类带!important，后续!text-sm会失效；更稳妥的是important: '#app'，把影响范围锁死在根容器内 -
prefix: 'tw-'只改生成类名，对preflight完全没反应——它重置的是标签，不是类
遇到 Shadow DOM、内联样式、iframe 怎么办
这三类情况，CSS 选择器再强也无效。权重不是问题，而是根本选不到。
- 内联样式（
style="color: red"）权重为 1000，高于所有外部 CSS 包括!important；必须用 JS 改：el.style.setProperty('color', 'blue', 'important') - Shadow DOM（如某些 Web Components）：查文档是否支持
::part()，例如t-button::part(icon) { color: red }；不支持就只能用:host在自定义元素内部覆盖 - iframe：外部 CSS 完全无法穿透，要么控制 iframe 内容源，要么用
postMessage通信后 JS 注入样式
真正麻烦的从来不是怎么写，而是判断样式到底卡在哪一层：是作用域隔离、加载顺序、特异性不足，还是根本不在同一棵树上。
