关于 CSS 变量的一些你可能不了解的事！( 三 ) _生活百科

以上的示范都不能工作。第一个和第二个都有无效值，因为它们都有嵌套依赖。最后一个例子，padding 和 margin 都是 20px，因为级联会获取第二个 --s: 20px 的变量去应用。
这很不幸，你应该停止用 C++, Javascript, Java 等语言的思维去思考 CSS 变量，因为它们有自己逻辑的自定义属性。
9. 它们只能从父元素传递给子元素
请记住这个黄金规则：CSS 变量总是从父元素（或者说祖先元素）传递给子元素，不会从子元素传递给父元素或兄弟元素。
:root { --c1: red; --c2: blue; --grad: linear-gradient(var(--c1),var(--c2);}.box { --c1: green; background:var(--grad);}你可以会认为 .box 背景颜色是 linear-gradient(green, blue) ? 不，背景颜色会是 linear-gradient(red, blue) 。
root 元素是 DOM 元素的最上层，所以它是 box 的祖先元素，我们应用上面的黄金规则知道，子元素的 --c1 是跑不到 linear-gradient(var(--c1),var(--c2) 中的。
10. 它们可以有奇怪的语法
最后一个也是有趣的一个。
你知道你能像下面这样写么？
body { --:red; background:var(--);}很神奇，对吧？是的，CSS 变量可以仅使用两节虚线定义。
你会认为上面已经很疯狂了？看下下面这个：
body { --?:red; --?:green; --?:blue; --?:orange;}是的，你还可以用表情来定义一个变量。
CSS 变量允许你以 -- 开头的任何内容。比如：
body { ---------:red; background:var(---------);}又比如：
body { --?:red; --?:blue; background:linear-gradient(90deg, var(--?),var(--?));}其实上面是这样的：