局部css变量能覆盖:root声明的值是因为css变量按继承链就近查找，子元素读取var(--x)时取最近有效声明，:root只是起点而非终点；:root:root则通过提高特异性防止被组件库覆盖。
局部CSS变量为什么能覆盖:root声明的值
因为CSS变量靠继承链就近查找，不是“覆盖”而是“遮蔽”——子元素读var(--x)时，只取DOM祖先中**最近一次有效声明**的值，:root只是起点，不是终点。
常见错误现象：:root { --color-primary: #1890ff; }写了，但某个按钮还是灰色 → 按钮父容器上写了.card { --color-primary: #f5222d; }，且按钮在.card内部，于是取到红色。
-
:root只是HTML根元素，它的变量靠继承向下传，中间任何节点重声明同名--x，都会截断继承链 - 声明位置决定作用域：写在
.modal上，就只影响.modal及其所有后代，和选择器权重无关 - 没有“全局锁定”机制：哪怕
:root里用!important（实际不合法），也无法阻止局部重声明 - DevTools里查
var(--x)计算值时，“Defined in”显示哪一行，就是哪一行生效了——不是看谁先写，而是看谁离得近
:root:root这种写法到底在干什么
它不是为了“覆盖”，而是为了**提高特异性**，确保你的全局变量声明不被组件库样式反向覆盖。Ant Design Mobile等库的默认主题也写在:root下，如果你只写:root { --adm-color-primary: red; }，加载顺序稍晚就会被覆盖。
而:root:root { --adm-color-primary: red; }把特异性从(0,1,0)拉到(0,2,0)，稳压组件库的单:root声明。
- 这不是hack，是官方明确推荐的写法，源码里所有默认变量确实都落在
:root里 - 仅适用于你真想“锁死全局基础色”的场景；如果要换肤，应配合class切换，而不是反复改
:root:root - 别在
:root:root里写媒体查询或JS动态值——它只适合静态基础配置
局部变量声明失效的典型原因
你以为写了局部变量，但子元素根本没读到，大概率不是语法错，而是DOM结构或选择器没命中。
- 变量写在
.header__title上，但页眉文字在.header__nav里 → 两者平级，不继承 - Web Component（如
<my-button></my-button>）用了Shadow DOM，外部.card { --x: red; }进不去，必须设在宿主元素my-button上 - 父容器用了
all: unset或all: initial，直接清空了所有继承来的--x - 变量名拼错，比如
--primary-color写成--primay-color，DevTools里显示invalid
React/Vue项目里最容易忽略的一点
你在App.css里写了.theme-dark { --color-bg: #1e1e1e; }，但组件里var(--color-bg)还是白的——很可能是因为这个组件没被.theme-dark包裹，或者用了styled-components等CSS-in-JS方案，根本没走CSS继承链。
- 检查HTML结构：目标元素是否真的在
.theme-dark的DOM子树内 - CSS-in-JS默认不支持CSS变量继承，需显式透传或用
style={{ '--color-bg': '#1e1e1e' }} - 动态主题切换时，别只改class，还要确保对应变量已在该class规则中声明，否则class加了也没用
all: unset或Shadow DOM隔断。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
