Chrome DevTools 直接编辑CSS变量不生效，是因为仅修改样式表文本而不触发级联重计算；需手动强制重绘（如切换伪类、执行setProperty或剪贴变量声明）才能使变更传播到已渲染元素。
在 Chrome 开发者工具中直接修改 :root 或其他选择器里的 CSS 变量（比如双击编辑 --primary-color: #007bff）后样式没变，不是因为你改错了，而是你没触发「级联重计算」——浏览器不会自动把新值广播给所有已用 var(--primary-color) 的元素。
为什么改了变量值但页面没更新
CSS 变量的生效依赖「级联 + 重绘」，而开发者工具里直接编辑变量声明只是改了样式表文本，并不强制刷新整个继承链。尤其当目标元素的 computed style 已缓存、或其父级有 all: unset 等重置规则时，变更根本不会向下传播。
- Chrome DevTools 编辑变量后，仅更新该条声明的文本，不调用
document.styleSheets的重解析逻辑 - 已渲染的元素不会监听
style表变化，除非你手动触发重排（如 resize 窗口、切换 tab、强制 toggle class） - 如果变量定义在非
:root作用域（例如.theme-dark { --bg: #111; }），且当前元素不在该选择器匹配范围内，改了也白改
怎样让修改真正生效
别只靠双击编辑，要配合「强制重计算」动作：
- 在 Elements 面板选中任意一个用了该变量的元素，右键 → Force state → 勾选/取消
:hover或:active，触发重绘 - 在 Console 里执行
document.documentElement.style.setProperty('--primary-color', '#ff6b35')—— 这会立即触发级联更新 - 临时删掉又粘贴回整条变量声明（在 Styles 面板里 Ctrl+X / Ctrl+V），比双击更可靠
- 如果变量在
@media规则里，确保媒体查询条件仍满足（比如改暗色模式变量时，确认系统/页面主题仍是 dark）
哪些情况会让 DevTools 修改完全失效
即使操作正确，以下场景也会导致“改了等于没改”：
立即学习“前端免费学习笔记（深入）”；
-
all: unset或all: initial出现在变量查找路径上，直接切断继承链，var()查不到任何值 - 变量名拼写不一致：DevTools 里改的是
--text-color，但 CSS 中引用的是var(--text-colour)（英式拼写） - CSS 文件加载顺序错乱：变量定义在
theme.css，但该文件在main.css（含var()）之后才加载，DevTools 显示的变量值其实是 fallback - 使用了 Shadow DOM 且变量未穿透：
:host或::slotted作用域外的变量修改不影响内部组件
最常被忽略的点是：你以为在改变量，其实只是在改一串文本；CSS 变量不是 JS 变量，没有 setter 和响应式绑定——它靠的是浏览器对整个样式树的重新评估，而 DevTools 默认不帮你做这一步。
