CSS变量在父元素和子元素中的继承和覆盖规则?-灵析社区
办公室高手**不是 BUG** ，控制台划掉的只是因为 `--light-color` 变量被覆盖了，跟 `--color` 变量的值无关，所以 `--color` 还是在 `.container` 中赋值的 `--light-color` ，即 `red`，你点一下那个高亮还会有辅助指向 发生这个问题的核心是：css 变量是基于 **重新定义** 来实现覆盖的，所以它 **没办法改变变量值** 内部作用域覆盖，**只是** 让变量先找内部作用域，而 **不是** 修改外部已经定义的变量值 因此上述代码可以这样改（省略掉中间变量 `color`）： .container { --light-color: red; --dark-color: green; } .A, .B { height: 100px; } .A { background-color: var(--light-color); } .B { /* 这样才会正确覆盖作用域 */ --light-color: blue; background-color: var(--light-color); } css 变量的作用域是可以覆盖，但是如果这个变量的值是另一个变量，在 `var` 的时候，其实已经是一个字符串了，不是引用了，所以再怎么改 `.B` 的变量，也不会生效，除非你重新定义一遍（当然这样没啥意义，不如去掉） .B { --light-color: blue; --color: var(--light-color); /* 等于说是把外部的 --color 覆盖了 */ background-color: var(--color); }