css自定义变量必须在:root中声明才能全局生效，因其匹配文档根元素、权重大且跨文档类型稳定；html选择器权重相同但兼容性差，body等局部声明会限制作用域。
CSS自定义变量必须在 :root 里声明才能全局生效，否则 var() 调用会回退到初始值或失效。
为什么一定要用 :root 而不是 html？
:root 是 CSS 伪类，它匹配文档的根元素，在 HTML 中等价于 html，但优先级更高（权重大于 html 选择器），且在 SVG、XML 等非 HTML 文档中也能正确指向根节点。如果写成 html 选择器声明变量，某些框架（如 Shadow DOM 场景）或预处理器嵌套后可能被意外覆盖。
-
:root的样式权重是 0-1-0，html是 0-1-0，但浏览器解析时:root更稳定 - 不推荐写成
body或其他元素——变量作用域会被限制，var(--color)在子元素外就不可用 - 多个
:root块会合并，但同名变量以后声明的为准（层叠逻辑和普通 CSS 一致）
var() 调用时的 fallback 写法和常见失效原因
var() 第二个参数是 fallback，仅当变量未定义或语法错误时才启用。它不是“备选变量”，也不能嵌套调用 var()。
- 正确：
color: var(--text-color, #333);—— 变量不存在时用#333 - 错误：
color: var(--text-color, var(--fallback));—— 第二个参数不支持嵌套var() - 错误：
background: var(--size)px;—— 单位不能拼在var()外面，要写成var(--size)本身含单位（如--size: 16px） - 注意：
var(--missing, 10px 10px)这种多值 fallback 必须加引号包裹（实际无效），正确做法是让变量本身包含完整值
动态修改 CSS 变量的 JS 操作方式
直接改 :root 的 style 不行，得通过 document.documentElement.style 设置，因为 :root 对应的就是 document.documentElement。
document.documentElement.style.setProperty('--primary-color', '#2563eb');
- 读取变量值要用
getComputedStyle(document.documentElement).getPropertyValue('--primary-color') - 修改后所有用到该变量的元素会自动重绘，无需手动触发
- 慎用频繁 setProperty：大量变量更新建议批量操作（例如一次性 set 多个，或用 CSSOM 批量注入）
- 不要在循环里反复读取
getPropertyValue，性能差；可先缓存计算结果
变量名大小写敏感，--Color 和 --color 是两个变量；CSS 变量不支持缩写属性（比如不能用 --margin: 1em 然后在 margin 里写 var(--margin) 同时生效于上下左右——必须显式写全 margin: var(--margin)，它只替换一个值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
