直接写 .el-button 无效是因为 scoped 样式编译后添加了属性选择器（如 [data-v-xxx]），而 element plus 等第三方组件内部 dom 并无该属性，导致不匹配；vue 3 中必须用 :deep(.el-button__inner) 等穿透写法，且需嵌套在外层选择器下才生效。
为什么直接写 .el-button 无效
第三方组件库（如 Element Plus、Ant Design）生成的 DOM 节点通常带有一组稳定类名，但它们往往被包裹在 scoped 样式或 Shadow DOM 中。单独写 .el-button 在 Vue 的 <style scoped></style> 里会被编译成类似 .el-button[data-v-abc123] 的选择器，而组件内部真实渲染的节点并不带这个 data-v-xxx 属性，自然不匹配。
- Vue 3 中必须用
:deep()，且它不能孤立存在：要写成.my-form :deep(.el-input__inner)，其中.my-form是你组件内真实存在的外层容器类 - React + CSS Modules 场景下，得用
:global(.el-button)显式穿透作用域 - 遇到动态类名（如
el-input--large），务必在 DevTools 中 inspect 实际渲染出的 class，别照文档硬写
:deep() 写了却没生效的三个典型原因
不是语法错，是规则压根没进浏览器样式计算链。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
:deep(.el-button__inner)单独写在<style scoped></style>顶层 → 编译后被丢弃，不生成任何 CSS -
:deep()里用了空格分隔的后代选择器：:deep(.el-button .el-button__inner)会失效；只能写:deep(.el-button__inner) - 目标元素实际在
<teleport></teleport>或<el-dialog></el-dialog>内部 → DOM 已脱离当前组件树，:deep()失效，此时必须提至全局样式文件或改用:global()
加载顺序和特异性才是真正的胜负手
哪怕你写了 !important，如果组件库 CSS 在你的样式之后加载，照样被覆盖。浏览器只认“最后定义 + 最高特异性”。
- 确保自定义 CSS 在
main.ts中 import 得比组件库 CSS 更晚，例如：先import 'element-plus/dist/index.css'，再import './styles/index.css' - 优先组合组件库原生类名：
.el-button.my-primary比.my-primary权重高，且更稳定——只要库还挂el-button类，你的样式就还在 - 避免用 ID 或内联 style：
id="btn"权重虽高，但不可复用、难测试，且一旦组件库升级加了!important就可能反向压制你
遇到 Shadow DOM、内联样式、iframe 怎么办
这三类情况，CSS 选择器再强也无效。权重不是问题，而是根本选不到。
- 内联样式（
style="color: red"）：权重为 1000，高于所有外部 CSS 包括!important；必须用 JS 改：el.style.setProperty('color', 'blue', 'important') - Shadow DOM（如某些 Web Components）：查文档是否支持
::part()，例如my-date-picker::part(trigger) { border: 1px solid #1890ff; } - iframe（TinyMCE、PDF 查看器）：它是独立文档上下文，父页面 CSS 完全无效；只能通过
iframe.contentDocument注入样式，或依赖组件自身提供的 theme API
!important 只是在碰运气。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
