css变量查找基于定义位置而非父元素计算值，是向上匹配最近选择器定义而非继承；:root定义易被高特异性或后置选择器覆盖；微信小程序rootportal隔离导致变量不可见；all: unset会截断变量继承链。
var() 查找的是定义位置，不是父元素的计算值
CSS变量的“继承”是假象——var(--color) 实际做的是向上查找 DOM 中**最近一个匹配的选择器里定义的该变量**，而不是读取父元素当前 color 属性的值。比如：.card { --color: red; }，.card > .btn 用 var(--color) 拿到 red；但如果中间插了个 .card__header { --color: blue; }，那 .card__header > .btn 就拿到 blue，哪怕它视觉上仍属于 .card 内容。
这种查找机制和传统 CSS 继承（如 color 属性自动向下传）完全不同。你以为在“覆盖父级样式”，其实只是换了个祖先节点去读变量——根本没触发“覆盖”，只是查到了另一个定义。
父级变量被 :root 或高权重选择器锁死
很多项目把主题变量全塞进 :root，比如 :root { --primary-color: #3b82f6; }。这时所有后代元素默认都从根节点读这个值，除非你写的重定义选择器**特异性更高**或**出现顺序更靠后**。
- 错误写法：
.button { --primary-color: #ef4444; }—— 特异性低于:root，无效 - 有效写法：
.button[data-theme="danger"] { --primary-color: #ef4444; }或body .button { --primary-color: #ef4444; } - 更稳妥：
.mylib-button { --primary-color: #ef4444; }，配合组件内部用var(--primary-color)，避免和全局冲突
微信小程序 RootPortal 隔离导致变量不可见
Taro 4 的 <rootportal></rootportal> 渲染内容会被微信原生 <root-portal></root-portal> 包裹，其 styleIsolation: isolated 会切断 CSS 变量继承链。浮层节点虽然 DOM 上移到了 <page></page> 下，但样式上下文已隔离，var(--bg) 找不到 :root 或页面级定义的变量，直接 fallback 为无效值。
这不是“覆盖失败”，而是**根本查不到定义**。绕过方法只有两个：
- 把变量声明提升到
<page></page>标签上（微信支持），而非只写在组件 class 里 - 改用内联
style注入变量值，例如style={{ '--bg': '#fff' }}，让变量随节点一起带进去
all: unset / all: initial 主动掐断继承链
如果某层用了 all: unset 或 all: initial，它会清空所有继承来的 CSS 自定义属性，包括变量。此时子元素调用 var(--x) 不会继续往上找，而是直接失效——看起来像“覆盖不了”，其实是继承链被暴力截断。
检查是否踩坑的方法：
- 打开 Chrome DevTools → Elements 面板 → 点击目标元素 → Computed 标签页 → 搜索
--x - 看 “Computed” 值是不是
invalid或空白，再看 “Used by” 列有没有大量依赖项 - 往上逐层检查父元素 computed style 中是否有
all: unset
真正需要透传变量时，别用 unset，改用 --color: inherit，让变量值继续向上继承原始定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
