css变量生效取决于选择器是否声明而非dom嵌套深度；需在包裹容器声明、避免全局污染、用唯一前缀隔离模块、警惕第三方组件高权重覆盖，并通过devtools验证定义位置。
直接改 :root 里的变量，对嵌套组件基本没用——它不触发局部重计算，也不解决选择器级联冲突。真正起效的修复，得从变量声明位置和选择器结构两个地方同时动手。
为什么 var(--x) 在子组件里总读不到父组件设的值？
CSS 变量靠继承链查找，不是靠 DOM 深度自动透传。如果父组件只是在 .card__header 这类子选择器里写了 --color: red，那只有这个元素自己能用，.card__footer 根本继承不到。
- 变量必须声明在包裹整个嵌套结构的最外层容器上，比如
.card { --text-color: #212529; } - 检查 DevTools 的 Computed 面板，搜索目标变量，点开看 “Defined in” —— 如果显示
inherited from，说明中间某层根本没声明过它 - Shadow DOM 宿主元素（如
<my-button></my-button>）不继承外部.card的变量，必须显式写在宿主标签的选择器里：my-button { --text-color: #212529; }
怎么让 .btn 和 .card .btn 各用各的变量值？
靠选择器层级 + 局部变量声明，而不是赌加载顺序或加 !important。变量名相同不要紧，关键是谁先“定义”，谁在 DOM 上更近。
- 给不同模块加唯一类名前缀：
.mylib-btn { --border-radius: 4px; }、.mylib-card { --border-radius: 8px; } - 避免把所有变量塞进
:root—— 全局变量一多，改一个就可能意外影响按钮、表单、弹窗三处 - 用
:where()扁平化组合选择器权重，防止.card .btn权重过高导致后续无法覆盖：.card :where(.btn, .icon) { padding: calc(var(--gap) * 0.5); }
第三方组件（如 Ant Design）里 var(--ant-primary-color) 死活不听你设的值？
它们通常在自己的 CSS 文件里用高权重选择器（如 .ant-btn）或 Shadow DOM 内部声明了同名变量，你写在 :root 或 body 的值，加载顺序稍晚或权重不够，就会被静默覆盖。
- 别碰
:root里的第三方变量名，优先用组件支持的主题 class（如ant-btn theme-dark） - React/Vue 项目中，JS 动态设置要落在宿主元素上：
btnRef.current.style.setProperty('--ant-primary-color', '#1890ff') - 调试时若
var(--x)显示invalid，大概率是拼错变量名，或宿主用了all: unset把所有--*清空了
最容易被忽略的是：变量是否生效，和 HTML 嵌套有多深完全无关；只取决于 CSS 选择器是否命中并声明了它——哪怕结构是平铺的，只要你在 .section 上写了 --bg，所有带该类的后代都会继承；反之，哪怕嵌套十层，没在对应选择器里声明，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
