子盒子通过css变量（如--color-theme）配合var()函数自动继承父盒色调，需在父元素显式声明变量，子元素用var(--color-theme)读取；变量本身不继承，依赖级联与作用域查找。
怎么让子盒子自动用父盒子的色调，而不是写死颜色值
靠 CSS 变量（--color-theme 这类自定义属性）配合继承机制，比硬写 #3b82f6 或 blue 更可控。变量本身不继承，但声明在父元素上时，子元素可以用 var(--color-theme) 读取——关键在于作用域和级联规则。
- 必须在父元素上用
style或 CSS 规则显式设置变量，比如div { --color-theme: #10b981; } - 子元素无需额外声明，直接在自身样式里用
color: var(--color-theme);即可生效 - 如果子元素自己也设置了同名变量（如
--color-theme: #ef4444;），就会覆盖父级，这是有意设计的“局部重载”，不是 bug - 注意：伪元素（如
::before）也能继承父级变量，但 SVG 内联样式、iframe子文档不参与该继承链
为什么 color 能继承但 --my-color 不自动传递
CSS 自定义属性本身不具有继承性，它们只是“存储容器”。真正起作用的是 var() 函数在计算时向上查找最近的有效声明——这依赖于 CSS 的**级联（cascade）和作用域（scope）**，不是传统意义上的属性继承。
-
color是原生可继承属性，子元素默认拿到父元素计算后的颜色值（如rgb(16, 185, 129)） -
--my-color是自定义标识符，没被var()引用时完全不参与渲染，也不会变成真实颜色值 - 常见错误：在根元素设了
:root { --color-theme: blue; }，但某层子元素写了div { --color-theme: unset; }，会导致后续子孙调用var(--color-theme)失败，返回初始值或 fallback
多主题切换时，CSS 变量层级混乱怎么办
主题切换本质是批量更新变量值，混乱通常来自选择器优先级冲突或变量覆盖时机不对。最稳的方式是把主题变量集中挂到 :root 或某个顶层容器（如 body.theme-dark），避免分散声明。
- 推荐结构：
body.theme-light { --color-primary: #3b82f6; }和body.theme-dark { --color-primary: #60a5fa; }，所有组件只读var(--color-primary) - 别在组件内部用
!important锁定变量值，这会破坏主题切换能力 - 调试技巧：Chrome DevTools 的 Computed 面板里搜
--color，看当前元素实际解析到哪个作用域的值；或者临时加outline: 1px solid var(--color-primary);快速验证 - 注意兼容性：
var()在 IE 完全不支持，若需兼容，得用 PostCSS 插件降级或 JS 回退
用 JS 动态改 CSS 变量影响性能吗
单次修改（如 document.documentElement.style.setProperty('--color-bg', '#f9fafb');）开销极小，但高频触发（比如 scroll 或 mousemove 里反复设）会引起强制同步布局（layout thrashing），尤其当变量被大量元素的 var() 引用时。
立即学习“前端免费学习笔记（深入）”；
- 优化建议：把多个变量合并一次 set，而不是逐个
setProperty - 避免在循环中读写变量，比如
for (let i = 0; i —— 改成 CSS 动画或 transform 更合适 - 如果只是开关类状态（亮/暗），用 class 切换（
document.body.classList.toggle('dark')）比 JS 改变量更轻量、更可预测
var() 查找逻辑是核心，很多人卡在“明明父元素写了变量，子元素却用不到”，其实只是漏了 var() 调用，或者被中间某层的 unset / initial 截断了。 
