子元素var(--color)没生效的根本原因只有两个：父元素未定义--color且无fallback，或中间某层设了--color:initial/unset切断传递链；变量名大小写不一致也会导致失败。
为什么子元素用 var(--color) 没生效？
根本原因就两个：父级压根没定义 --color，或者中间某层写了 --color: initial 或 --color: unset 切断了传递链。别急着查子元素，先打开 DevTools 的“Computed”面板，点开“Custom Properties”，往上逐层看祖先节点有没有声明、有没有被重置。
常见错误现象：
- 控制台无报错，但颜色/尺寸没变——大概率是 fallback 被用了（
var(--color, #000)中的#000生效了） - 父元素明明写了
--color: red，子元素却拿到initial值——检查中间是否有组件或框架注入了--color: initial - 变量名大小写不一致，比如父设
--BgColor，子写var(--bgcolor)—— CSS 变量严格区分大小写
:root 定义的变量真能全局用？
能，但要注意作用域边界：:root 是文档根，它的变量对所有后代生效，前提是没被覆盖或切断。但 Shadow DOM 内部默认不继承 :root 的变量（除非显式透传），iframe 里的文档也完全隔离。
实际使用建议：
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 主题色、间距、圆角等高频复用值，优先放
:root - 局部模块变量（如
.card内的--shadow）直接在对应选择器里定义，避免污染全局 - 不要在
body上定义变量试图“模拟全局”——它不是根，子元素可能因 DOM 结构跳过它
unset 和 initial 在变量覆盖时怎么选？
二者都“清空”，但语义不同：--gap: unset 让变量回到“未定义”状态，子元素调用 var(--gap, 8px) 会取 8px；而 --gap: initial 等效于彻底删掉这行声明，效果类似，但更彻底——尤其当变量本身有浏览器默认行为时（极少，但存在）。
简单记：
- 想让子元素 fallback 生效 → 用
unset - 想确保变量绝对不存在、不留任何计算痕迹 → 用
initial - 别用
inherit对自定义属性——它只对原生属性有效，写--color: inherit不会继承父级--color值
JS 动态改 CSS 变量时容易漏掉什么？
el.style.setProperty('--color', 'red') 确实生效快，但有三个隐形约束：
- 只影响该元素自身，不自动向下继承——得手动遍历子元素或靠 CSS 层叠规则
- 如果父级用
:root定义了同名变量，内联设置会覆盖它，但一旦 JS 清除该属性（setProperty('--color', '')），父级值不会自动恢复，得手动重设 - SSR 或服务端渲染场景下，JS 执行前变量已计算完毕，动态改可能造成闪动——建议配合
data-theme类 + CSS 条件规则兜底
真正难调试的，是变量继承链里某一层被第三方库悄悄写了 --xxx: unset，它不报错、不显眼，但整条链就断了。查的时候别只盯自己写的 CSS，得把所有引入的样式表和框架默认样式扫一遍。
