chrome devtools 中确认 --color-primary 生效来源需先打开 elements 面板选中元素，再在 styles 面板搜索该变量；若未生效，切换至 computed 面板查找 color 属性的“source”列，其明确指示最终取值定义位置及作用域。
Chrome DevTools 里怎么看哪个 --color-primary 被用了
打开 DevTools → Elements 面板 → 选中目标元素 → 右侧 Styles 面板里搜 --color-primary，出现的每一条都带文件名和行号。被划掉的那条说明它被后续同名变量覆盖了；没被划掉但最终没生效？别急着改，先点开 Computed 面板，找 color（或对应属性）那一行，往上看“Source”列——它会明确写出最终取值来自哪个 --color-primary 定义，甚至标出是 :root、.card 还是内联样式。
var(--color-primary) 没生效，但变量明明定义了
常见原因不是没定义，而是没继承到或被中间层截断：
-
:root里定义的变量默认可继承，但如果父级用了all: unset或all: initial，子元素就收不到任何继承值，包括自定义属性 - 某个中间祖先写了
--color-primary: transparent，它会覆盖掉:root的值并继续向下传，你看到的“失效”其实是被静默替换了 - 使用了
shadow DOM，宿主元素定义的--color-primary不会穿透进 shadow root，必须显式通过inherit或part透传 - Vue 的
<style scoped></style>或 CSS Modules 生成的哈希类名，会导致你写的.btn { --color-primary: red }实际作用在.btn[data-v-abc123]上，而子元素可能不在这个 scope 内
怎么确认是继承链断了，还是根本没匹配上选择器
直接看 Computed 面板最靠谱：
- 如果
--color-primary在 Computed 面板里压根不显示，说明当前元素没收到任何该变量定义——检查选择器是否命中、是否在 shadow DOM 外围、是否被display: none或content-visibility: hidden拦截了计算 - 如果显示了但值不对，展开它，点右侧箭头看“Defined in”，逐级往上查定义位置；特别注意带
inherited from字样的来源，那是真实继承路径 - 临时加一句
body { --debug: "here" }，再在子元素 Computed 里搜--debug，能快速验证继承是否通路
用 JavaScript 查 getComputedStyle 读不到变量值？
getComputedStyle(el).getPropertyValue('--color-primary') 返回空字符串，通常是因为：
- 变量确实没继承到（同上，检查 Computed 面板）
- 你在元素上用的是
el.style.setProperty('--color-primary', 'red')，但该元素还没挂载到 DOM，或者刚设置完就立刻读——需确保 DOM 已更新（可用requestAnimationFrame包一层） - 读的是伪元素，比如
::before，得用getComputedStyle(el, '::before')显式指定 - CSSOM 中变量名大小写敏感：
--Color-Primary和--color-primary是两个变量，JS 读的时候必须完全一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
