:root不是html的别名，因为它始终指向文档逻辑根元素（HTML中为html，XML/SVG中为对应根节点），语义更准确、跨环境更可靠；在Shadow DOM、iframe或Web Components中，:root能穿透作用域而html不能。
为什么:root不是html的别名？
因为:root选中的是文档的根元素，而这个“根”由文档类型决定——HTML里确实是html，但XML或SVG里可能是svg或自定义根节点。:root更语义化、更可靠，尤其在跨文档或Web Components场景下，它始终指向逻辑上的顶层容器，不硬编码标签名。
常见错误是以为:root和html完全等价，结果在Shadow DOM或iframe嵌套时样式失效。比如在Shadow Root里写html { background: red }根本不起作用，但:root可以穿透到那个封闭作用域的根。
:root里声明CSS变量最安全的位置
全局CSS变量（custom properties）必须放在能被所有后代继承的作用域里，:root是唯一保证“真全局”的地方。放html里看似一样，但在某些浏览器（如旧版Safari）中，html的伪类或继承链可能被截断；而:root被规范明确定义为变量作用域的锚点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有项目级主题变量统一写在
:root块里，例如:root { --primary-color: #007bff; } - 避免在
body或组件class里重复声明同名变量，否则会覆盖而非继承 - 动态改主题时，直接
document.documentElement.style.setProperty('--primary-color', 'red')，它只影响:root作用域，不会污染其他层级
用:root做响应式根字号适配要注意什么？
很多人用:root { font-size: clamp(14px, 2.5vw, 18px); }实现流体排版，这没问题，但容易忽略两个现实约束：
第一，rem单位基于:root的计算值，而这个值在页面渲染初期就固定了——如果JS后期动态修改document.documentElement.style.fontSize，已渲染的元素不会自动重排，得手动触发重绘（比如加个transform: translateZ(0)）。
第二，在@media里写:root规则时，不要嵌套：写成@media (min-width: 768px) { :root { --font-scale: 1.2; } }是合法的；但写成:root { @media (min-width: 768px) { --font-scale: 1.2; } }会报错——CSS不支持伪类内部嵌套媒体查询。
哪些情况:root会选不到东西？
极少，但真实存在：
当文档还没解析完，document.querySelector(':root')返回null——这不是选择器问题，是DOM时机问题。此时document.documentElement反而更稳。
另一个坑是CSSOM操作：用getComputedStyle(document.documentElement).getPropertyValue('--my-var')能取到变量值，但用getComputedStyle(document.querySelector(':root'))在某些老浏览器（IE11及更早）会报错，因为:root不被识别为可计算样式的目标节点。
所以，JS里要访问根节点，优先用document.documentElement；CSS里要用根作用域，只认:root——两者分工明确，混用反而容易出事。
