直接改:root变量值不生效，根本原因是CSS变量仅提供值，不解决层叠顺序问题；更高权重选择器硬编码颜色或内联样式会覆盖var()引用，需确保样式声明顺序合理、无冲突覆盖。
为什么直接改 :root 变量值不生效？
常见现象是：JS 修改了 document.documentElement.style.setProperty('--primary', '#ff6b6b')，但页面颜色没变。根本原因不是变量没设上，而是你可能覆盖了原有 CSS 规则的优先级——比如写在外部样式表里的 .btn { color: var(--primary); } 被更具体的规则（如 .btn.active { color: #333; }）压住了。CSS 变量只负责“提供值”，不解决层叠顺序问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保所有用到变量的样式都写在
:root后声明，且没有更高权重的选择器硬编码颜色 - 用浏览器开发者工具检查元素的
color计算值，确认它是否真的取自var(--primary) - 避免在内联样式里重复设置同名属性（比如
style="color: red"），它会盖过var()
如何用 class 切换皮肤而不是反复 setProperty？
频繁调用 setProperty 容易出错、难维护，也影响性能（尤其主题多时）。更可靠的方式是预定义几套皮肤 class，通过切换 document.body.className 来批量生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
:root里只定义默认变量，例如：:root { --primary: #4a6fa5; --bg: #ffffff; } - 为每套皮肤单独写 class，比如
.theme-dark：.theme-dark { --primary: #64b5f6; --bg: #121212; } - JS 切换只需一行：
document.body.classList.toggle('theme-dark') - 注意：
.theme-dark必须作用于<body>或其祖先，才能被后代元素继承变量值
在线预览环境里怎么持久化当前皮肤？
刷新就回默认主题，用户会很懵。本地存储是最轻量的方案，但要注意读取时机——不能等 DOM 加载完才读，否则闪屏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>里放一段内联脚本，立即读取localStorage.getItem('theme')并加 class： - 不要用
DOMContentLoaded，改用document.documentElement.classList.add(...)在 HTML 解析阶段就注入 - 写入时同步更新
localStorage：localStorage.setItem('theme', 'dark') - 别忘了加
prefers-color-scheme回退逻辑，比如用户没选过主题，就读系统偏好：if (!savedTheme) { const darkPref = window.matchMedia('(prefers-color-scheme: dark)').matches; document.documentElement.classList.add(darkPref ? 'theme-dark' : 'theme-light'); }
哪些 CSS 属性不适合用变量动态控制？
不是所有样式都适合塞进变量。比如 transition、transform、伪元素内容 content，虽然语法上能用 var()，但实际效果受限或不可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
transition：变量可传时间值（如--duration: 0.3s），但不能传整个transition声明（transition: var(--all-transition)不生效） -
content：仅支持字符串字面量，var(--title)在::before { content: var(--title); }中不会解析为变量值（除非用 JS 动态生成伪元素） - 媒体查询断点：
@media (min-width: var(--sm))❌ 不合法，必须用预处理器或 JS 注入@media块 - 真正安全的变量用途：颜色、尺寸、阴影、圆角、字体大小等纯值类属性
