chrome 140 中仅 @property 注册的 css 自定义属性支持点击跳转，普通 :root 声明无此功能；未声明、拼写错误、作用域不匹配或动态拼接的变量均无法被 devtools 索引，应通过计算样式是否回退至 initial 或 fallback 来确认是否生效。
Chrome 140 中能直接看到 CSS 自定义属性（--xxx）的声明来源，但必须满足两个前提：变量已通过 @property 显式注册，且你在 Elements > Styles 面板中悬停或点击了该变量名。
为什么有些 --xxx 点击没反应？
Chrome 140 的“自定义属性”高亮和跳转功能只对用 @property 声明的变量生效，不是所有 var(--foo) 都能点开：
-
@property是可选的 CSS 能力，未声明时 DevTools 不会建立变量元数据索引 - 纯
:root { --color: blue; }这类声明仍显示在 Styles 面板里，但悬停无工具提示、点击不跳转 - 变量名拼写错误（比如
--text-color写成--text-colour）会导致匹配失败，DevTools 当作未定义处理
如何确认一个 var(--x) 是否已被声明？
别依赖“有没有跳转”，看计算值是否回退到 initial 或 fallback 值更可靠：
- 在 Elements 面板选中目标元素 → 找到含
var(--x)的样式行（如background-color: var(--bg-primary);） - 右侧若显示
background-color: initial（且没写 fallback），说明--bg-primary在当前作用域链中未找到 - 点击该
var(--x)名称，DevTools 会高亮所有匹配的声明位置（:root、.theme-dark等），但仅限已加载且语法正确的 CSS - 如果高亮区域为空，说明变量根本没被解析——可能 CSS 文件 404、
@import失败，或变量在 JS 动态插入的 style 标签里但尚未执行
怎样让 @property 声明真正起作用？
即使写了 @property，Chrome 140 也不会自动识别，必须确保：
- 声明语法完整：
@property --my-color { syntax: "<color>"; inherits: false; initial-value: #000; }</color>—— 缺少syntax或写错格式（如漏掉分号）会导致注册失败 - 声明必须在 CSSOM 加载阶段执行；放在
<style></style>标签末尾或 JS 动态注入后才加，DevTools 可能来不及索引 - 变量名需完全一致：CSS 里是
--size-sm，JS 里读取时写成--size-small，DevTools 不会报错，但计算值为空字符串 - 作用域匹配失败很常见：比如
.dark --text: white;定义在 class 上，但元素没加dark类，DevTools 显示“已声明”却查不到生效值
真正容易被忽略的是动态生成的变量名，例如 var(--theme-${mode}) 或 JS 拼接的 el.style.setProperty('--' + key, val) —— 这类变量 Chrome 140 完全无法静态分析，必须靠 getComputedStyle(el).getPropertyValue() 手动验证返回值。工具再强，也覆盖不了运行时拼接的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
