display: none 会切断 css 继承链，子元素不参与样式计算，无法继承父级自定义属性；而 visibility: hidden 仍保留在渲染树中，变量可正常继承。
display: none 本身不继承，但它会直接切断 CSS 继承链——子元素根本拿不到父元素的任何计算样式，包括自定义属性（--my-var）。
为什么 display: none 下的子元素读不到父级 CSS 变量
浏览器在构建 Render Tree 时，会跳过所有 display: none 的节点及其整个子树。这意味着：子元素不参与样式计算，不生成盒模型，也不接收父级的继承值。哪怕你在父元素上写了 --color-primary: #333，子元素的 color: var(--color-primary) 也会 fallback 到初始值（比如 color: initial），因为变量压根没被“传下来”。
-
display: none不是“隐藏后还留着继承通道”，它是渲染层面的剔除，不是样式层面的覆盖 - 即使子元素自己设了
display: block，也无效——它连被计算的机会都没有 - DevTools 的 Computed 面板里，这类子元素的
var()值显示为invalid或直接空白，不是 bug，是预期行为
visibility: hidden 能继承 CSS 变量吗
能。因为 visibility: hidden 元素仍在 Render Tree 中，布局、样式计算、继承全部照常。父元素定义的 --size-base、--bg-theme 等变量，子元素可通过 var(--size-base) 正常读取并生效。
- 子元素设
visibility: visible可单独显示，不影响变量继承 - 注意：如果父元素用了
opacity: 0，变量依然可继承——opacity 不影响渲染树结构 - 但若父元素同时有
display: none和visibility: hidden，以display为准，后者被忽略
想让隐藏区域仍支持变量继承，该用什么替代方案
别依赖 display: none 来“临时隐藏又保持逻辑连通”。改用视觉隐藏但保留渲染树的方式：
- 用
visibility: hidden+pointer-events: none模拟“不可见不可点”，变量照常继承 - 用
opacity: 0+pointer-events: none，适合需要过渡动画的场景（display无法 transition） - 真要彻底移除布局影响？把需要继承变量的配置提前抽到 :root 或外层可见容器上，子元素直接读全局变量，绕过父级 DOM 断点
检查继承失效时，先确认这三件事
别急着重写变量声明，先看底层是否“断电”：
- 父元素是否被
display: none、content-visibility: hidden或 Shadow DOM 封装隔断 - 子元素是否在
display: none父元素内部，哪怕只嵌套一层——整条链就断了 - DevTools 里选中子元素，在 Styles 面板看
var(--x)是否标红或显示invalid；如果是，基本可判定继承链物理中断，不是语法写错
CSS 变量继承依赖的是渲染树存在性，不是选择器匹配或作用域嵌套。一旦 display: none 出现，它就不是“样式没传过去”，而是“压根没启动传递流程”。这点和 color 这类原生可继承属性的行为一致，只是变量更容易让人误以为“只要父级写了就能用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
