css变量继承依赖选择器声明而非dom深度，必须在容器元素上声明同名变量才能被后代继承；伪元素、@keyframes和shadow dom不自动继承，内联样式变量优先级最高。
直接改 :root 里的变量，嵌套组件根本不会响应——它只影响全局，不触发局部重计算；真正生效的覆盖，必须落在组件容器自身上。
为什么在父组件里声明 --color，子组件却读不到
CSS 变量靠继承链查找，不是靠 DOM 深度自动透传。如果父组件只是普通 <div class="parent">，并在 <code>.parent 规则里写了 --color: red，那只有这个 div 及其直系后代能继承；但若子组件是 Web Component（如 <my-button></my-button>），它的 Shadow DOM 根本不认这个 .parent ——继承起点是宿主元素本身，不是父容器。
- 检查 DevTools 的 Computed 面板，搜索目标变量，点开箭头看“Defined in”哪一行：如果显示
inherited from，说明没被任何中间节点覆盖 - 常见错误：把变量写在
.parent__header这类子选择器里 → 它只对自身生效，.parent__footer无法继承 - 正确位置：变量必须声明在包裹整个嵌套结构的最外层容器选择器上，比如
.card { --text-color: #212529; }
第三方组件（如 Ant Design）内部变量不听你控制
它们通常在自己的 CSS 文件里用高权重选择器（如 .ant-btn）或 Shadow DOM 内部声明了同名变量，比如 --ant-primary-color。你写在 :root 或 body 的值，加载顺序稍晚或权重不够，就会被静默覆盖。
- 不要碰
:root，改用命名空间前缀限定作用域：.my-app .ant-btn { --ant-primary-color: #1890ff; } - 若组件支持主题 class（如
ant-btn ant-btn-primary theme-dark），优先加 class 而非硬设变量 - React/Vue 项目中，避免把主题 CSS 注入
document.head—— 它穿不进 Shadow DOM，得用 JS 动态设在宿主元素上：btnRef.current.style.setProperty('--ant-primary-color', '#1890ff')
var(--x) 回退失效、显示透明或黑块
回退值不是“备用方案”，而是浏览器找不到变量时的兜底；一旦写错，旧版 Safari 会整条样式失效，文字变不可见。
- 回退值只能是静态值：
color: var(--text-color, #212529)，不能嵌套var(--fallback, #000) - Shadow DOM 中若变量未声明，
var(--x, #fff)仍会 fallback，但前提是宿主元素已显式声明过该变量名（哪怕值为unset） - 调试时若
var(--x)显示invalid，大概率是拼错了变量名，或宿主用了all: unset把所有--*清空了
最容易被忽略的是：变量是否生效，和 HTML 嵌套有多深无关，只取决于 CSS 选择器是否命中并声明了它——哪怕结构是平铺的，只要你在 .section 上写了 --bg，所有带 .section 类的元素后代都会继承；反之，哪怕 DOM 是五层嵌套，只要中间没一个选择器定义该变量，就断链。
