css自定义属性默认可继承，但常因作用域、重定义或var()回退逻辑导致“失效”；变量未定义时默认值才生效，unset/initial会切断继承，直接重声明可覆盖，inherit对自定义属性无效。
CSS自定义属性（即以--开头的变量）默认可继承，不需要额外操作——只要父元素定义了--color，子元素直接用var(--color)就能拿到值。但实际项目中，继承行为常被误认为“失效”，问题往往出在作用域、重定义或var()回退逻辑上。
为什么子元素用var(--x)却拿不到父元素定义的值？
常见错误是变量定义位置不对，或被中间层级无意覆盖：
-
:root里定义的是全局变量，所有元素都能访问；但若只在某个.section里定义--text-color，那只有它的后代能继承，兄弟节点拿不到 - 父元素没定义变量，但子元素写了
var(--missing)且没给默认值，此时该CSS声明会被浏览器忽略（不是报错，而是静默失效） - 中间某层元素显式设了
--text-color: unset或--text-color: initial，会切断继承链，后续子孙无法再沿用祖先值
var(--color, #000)里的默认值什么时候生效？
默认值只在变量**完全未定义**时触发，不是“继承失败”时才用：
- 如果
.grandparent定义了--color: red，.child没重定义，var(--color, #000)仍取red，#000不会生效 - 如果
.parent写了--color: unset，.child调用var(--color, #000)，此时unset让变量“无值”，#000就会被采用 - 注意：
initial和unset效果不同：initial对自定义属性等价于“未定义”，unset则取决于属性是否可继承——对自定义属性，两者在此场景下表现一致
如何让某个子元素“跳过”继承，强制用自己定义的值？
直接在该元素上重新声明同名变量即可，无需特殊语法：
-
.card { --gap: 16px; }→.card-header { --gap: 8px; }：后者覆盖前者，.card-header及其后代用8px - 想彻底清空继承值并避免意外 fallback，写
--gap: initial比留空更安全（空声明会被忽略） - 别用
inherit关键字操作自定义属性——inherit只对原生CSS属性有效，对--xxx无效
真正容易被忽略的点是：继承的是变量定义本身，不是var()计算后的结果。比如父元素--size: 2em，子元素font-size: var(--size)，这个2em始终相对于父元素的font-size计算，而不是子元素自己的。这种动态绑定特性既是优势，也是调试时绕晕人的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
