var(--x)未生效主因是变量未定义、被unset/initial切断继承链、拼写错误或display:none跳过计算，而非继承机制本身失效。
var(--x) 报错或没生效，根本就不是继承问题
CSS 自定义属性（--xxx）本身是可继承的，但「可继承」不等于「自动生效」。子元素写 color: var(--color-primary) 失效，90% 的情况不是变量没传下来，而是：var() 查找不到有效定义，或查到了但 fallback 被触发了。
- 父元素压根没定义
--color-primary，子元素又没写 fallback（如var(--color-primary, #000)），浏览器直接按无效值处理 - 中间某层祖先写了
--color-primary: unset或--color-primary: initial，切断了向下的变量传递链 - 变量名大小写不一致：父设
--TextColor，子用var(--textcolor)—— CSS 变量严格区分大小写 - 子元素在
display: none的父容器内：浏览器跳过整棵子树的样式计算，变量根本不会被“继承”或解析
:root 定义的变量，为什么某些子元素还是读不到？
:root 确实是全局作用域，但前提是子元素能触达它。常见断点不在变量声明本身，而在 DOM 结构或样式上下文。
-
display: none父元素下的所有后代，包括子元素，都不参与样式计算 —— DevTools 的 Computed 面板里var()会显示为空或invalid，这是预期行为，不是 bug - Shadow DOM 封装的组件：
:root在 shadow root 外，内部无法访问，必须显式通过inherit或part透传 - 父选择器范围太窄：比如你在
.card { --size: 16px; }里定义，那只有.card及其后代能用；如果子元素匹配的是更宽泛的p选择器，而该规则加载顺序在变量定义之前，var()就查不到 - JavaScript 动态设置时漏了目标节点：调用
element.style.setProperty('--x', 'val')时没指定element，默认写到:root，但若你本意是局部组件，就会污染全局或错位
height: inherit 为啥和 var(--height) 行为完全不同？
这是两个完全不同的机制，混用会导致误判。一个是对原生属性的显式继承指令，一个是读取自定义变量的函数调用。
-
height: inherit只对可继承属性有效，而height本身不可继承 —— 浏览器会尝试继承父元素计算后的height值，但若父是auto或未设明确高度，结果就是auto，看起来“没用” -
var(--height)不依赖height是否可继承，它只关心变量是否在作用域内被定义并能被查找到。你可以写height: var(--height, 200px)，只要--height有定义，就能生效 - 真正要撑满父容器高度，别靠
inherit，优先用display: flex+ 子项默认拉伸，或position: absolute+top/bottom: 0 - 想复用数值逻辑？把数字抽成变量：
.container { --height: 300px; height: var(--height); } .child { height: var(--height); }—— 这比反复写inherit更可控
调试时该看 DevTools 哪个面板？
别只盯着 Styles 面板里你写的那行 --color: red，那只是声明，不代表它已被继承或成功解析。
- 打开 Computed 面板，找到你要检查的属性（比如
color），看它的最终计算值。如果是rgb(0, 0, 0)或空白，说明var()没解析成功 - 点击右侧的箭头展开计算链，能看到
var(--x)是从哪一层取的值，以及 fallback 是否被启用 - 如果 Computed 里
color显示正常，但页面没变色，可能是其他规则覆盖了它（比如更具体的选择器、!important），这时回 Styles 面板看优先级 - 选中子元素，右键 → “Break on > attribute modifications”，再改变量值，可定位 JS 修改是否真的生效到目标节点
display: none 和 unset 这类“静默断点”——它们不报错，但让整条链失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
