CSS自定义属性默认可继承，子元素能通过var()使用父元素定义的--变量，如未被重定义则沿用祖先值；可通过重写、unset或initial阻止继承，且变量名区分大小写，继承的是变量定义而非计算结果。
CSS 自定义属性（也称CSS变量）默认是可以继承的，它们遵循标准的CSS继承机制。也就是说，如果一个自定义属性在父元素上定义了，它的子元素会自动继承这个属性，除非被显式地覆盖。
1. 自定义属性的继承机制
自定义属性以 -- 开头，例如 --main-color: blue;。只要该属性设置在某个祖先元素上，其后代元素就能访问它，前提是这些后代没有重新定义同名变量。
.parent {
--text-color: green;
}
.child {
color: var(--text-color); / 继承自 .parent /
}
在这个例子中，.child 元素虽然没有直接定义 --text-color，但它能通过 var(--text-color) 使用从 .parent 继承来的值。
2. 如何阻止或修改继承
如果你不希望某个元素继承父级的自定义属性，可以在该元素上重新定义同名变量，或者将其设为 initial 或 unset。
立即学习“前端免费学习笔记（深入）”；
- 重定义变量：在子元素上设置新的值。
-
使用
unset：让变量恢复到“无值”状态，如果是继承属性，unset会让它表现得像未定义一样。 -
使用
initial：将变量值重置为初始状态（即无值），不会继承。
示例：
.grandparent {
--gap: 20px;
}
.parent {
--gap: 10px;
}
.child {
--gap: initial; / 清除继承，不再使用父级的 10px /
margin: var(--gap, 5px); / 实际使用回退值 5px /
}
3. 注意事项
- 自定义属性区分大小写：
--color和--Color是两个不同的变量。 - 继承的是变量的定义，不是
var()的计算结果。也就是说，即使子元素的上下文不同，它依然会尝试获取继承来的变量值。 - 如果变量未定义且没有提供默认值，
var(--missing, fallback)会使用回退值；否则会导致样式无效。
基本上就这些。自定义属性的继承行为自然融入CSS的层叠与继承体系，合理使用可以让主题切换、组件化样式更灵活。
