css变量未生效主因是作用域错位或拼写错误：变量名严格区分大小写、连字符数量及顺序；var()仅在声明该变量的元素及其后代中有效，且受all: unset等重置属性中断继承链。

CSS变量不是“定义了就能用”，而是“在哪定义，就在哪生效”。你写的 --color-primary 在子元素里读不到，大概率不是语法错，而是它根本没被“看见”——作用域没对上。

为什么 var(--x) 显示 invalid 或 fallback 值

这是最直接的信号：浏览器查不到该变量的有效定义。常见原因包括：

• :root 没定义，却在组件里直接 var(--x) —— 比如只在 .card 里写了 --x: red，但 .btn 是 body 直接子元素，压根不在 .card 后代链上
• 变量定义在 display: none 父元素内 —— 整条继承链物理中断，子元素连“继承”这个动作都触发不了
• 拼写不一致：--text-color 和 --text-colour 是两个变量；大小写敏感：--Color ≠ --color
• 媒体查询或 JS 动态注入时，变量定义晚于样式计算（比如 document.styleSheets 插入顺序不对）

:root 定义的变量真能全局用吗

能，但有前提：子元素必须是 html 的后代，且未被 Shadow DOM、display: none 或 content-visibility: hidden 隔断。真实限制不在“能不能”，而在“有没有被渲染上下文接纳”：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• :root { --gap: 12px; } → 所有普通 DOM 子元素都能 var(--gap)
• 但若某组件用 attachShadow() 创建了 Shadow Root，它默认不继承 :root 变量，得手动传入或在 shadow 内重定义
• 若父容器设了 all: initial 或 all: unset，会清空包括自定义属性在内的所有继承值

局部变量覆盖时，var() 查找逻辑怎么走

var(--x) 不是“取父元素当前计算值”，而是“沿祖先链向上找最近一个有效 --x 定义”。这意味着：

• .modal { --z-index: 1000; }
.modal__overlay { --z-index: 999; }
.modal__overlay .close-btn { z-index: var(--z-index); } → 结果是 999，不是 1000
• 中间某层没定义 --x？查找继续向上，直到 :root 或断掉（返回 fallback 或无效）
• 不要依赖“父没覆盖就自动用祖上值”——如果某级必须用特定值，就在那级显式定义，别赌查找路径

真正容易被忽略的点是：CSS 变量的“继承”本质是作用域查找，不是值拷贝。调试时盯着 DevTools 的 Computed 面板看 var(--x) 解析结果，比翻 Styles 里的原始声明管用得多——后者只告诉你“写过”，前者才告诉你“有没有被找到”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！