直接看devtools的computed面板中--x的“defined in”位置即可确认声明与覆盖来源；若显示inherited from :root而本意是组件内覆盖，则说明覆盖未生效，常见原因包括变量写在子选择器而非容器、shadow dom未在:host显式声明、第三方库高权重覆盖或import顺序错误。
直接看 DevTools 的 Computed 面板里 --x 的“Defined in”位置，就能确定它到底被谁声明、又被谁覆盖——不是 DOM 嵌套深不深的问题，而是哪个选择器真正命中并设置了它。
怎么确认变量值被覆盖了而不是没生效
打开开发者工具，选中目标元素 → 切到 Computed 面板 → 搜索你的变量名（如 --text-color）→ 点击右侧箭头展开定义链。如果显示 inherited from .card，说明是 .card 上声明的；如果显示 inherited from :root 且你本意是在组件内覆盖，那大概率是覆盖没生效。常见假象：var(--text-color, #000) 显示黑块，不是被覆盖，而是变量名拼错或宿主元素被 all: unset 清空了所有自定义属性。
为什么在父组件设了 --color，子组件却读不到
CSS 变量不靠 DOM 深度继承，而靠 CSS 选择器是否匹配并声明。以下情况都会导致“断链”：
- 变量写在
.parent__header这类子选择器里 → 它只对自身生效，.parent__footer不继承 - 子组件是 Web Component（如
<my-button></my-button>）→ Shadow DOM 的继承起点是宿主元素（my-button标签本身），不是外层.parent - 第三方组件（如 Ant Design）在内部用高权重选择器（
.ant-btn）或 Shadow DOM 声明了同名变量 → 你写在:root或body的值加载稍晚或权重不够，会被静默覆盖
构建工具里 import 顺序影响变量覆盖吗
影响，而且很关键。Vite / Webpack 不按 HTML 的 <link> 顺序打包，而是按 JS 入口文件中的 import 语句顺序合并 CSS：
- 若你
import './theme.css'在import 'element-plus/dist/index.css'之前 → 主题变量根本不会生效，因为 Element Plus 的样式先加载、先解析 - 用 Sass 时，想覆盖 Element Plus 变量，必须在
@import 'element-plus/theme-chalk/src/common/var.scss'之前定义$primary等变量，否则导入后就已编译完成 - 动态
import()加载的 CSS 不保证插入顺序，慎用于主题切换等关键路径
最容易被忽略的覆盖点：宿主元素未显式声明变量名
Shadow DOM 中 var(--x, #fff) 能 fallback，但前提是宿主元素（比如 <my-card></my-card>）上至少声明过 --x 这个名字（哪怕值是 unset）。否则旧版 Safari 会整条规则失效，显示透明或黑块。调试时若看到 var(--x) 显示 invalid，第一反应不是查拼写，而是检查宿主元素的 style 属性或所在选择器是否漏写了该变量声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
