`* { color: var(--color) }`的作用是什么？与`color: inherit`有何差异？

一、写法的核心目的 #

• 统一颜色控制入口：把所有元素（包括伪元素:before/:after）的color属性绑定到--color变量上，不用在每个元素或状态里重复写color属性，后续改色只需要修改对应元素的--color值即可。
• 简化多状态适配：像链接的link/visited/hover/active这类多状态样式，只需要给选择器设置一次--color，所有状态的文字颜色就自动同步，不用逐个状态写color，减少冗余代码。
• 伪元素自动同步：伪元素默认不会完全继承宿主元素的color（部分浏览器有默认样式），这种写法直接强制伪元素使用--color变量，确保伪元素（比如图标、装饰性文字）和宿主元素颜色一致，不用单独给伪元素写颜色样式。

二、与* { color: inherit; }写法的差异 #

• 继承逻辑本质不同
  • inherit是让元素继承父元素的color属性值，属于CSS原生的属性继承逻辑，子元素自身如果没定义color，就直接复用父元素的color值。
  • 而var(--color)是查找当前元素或父元素链上的--color变量值，如果子元素自己设置了--color，就优先用自己的变量值，和父元素的color属性没有直接关联。
• 伪元素处理差异
  • * { color: inherit; }不会覆盖伪元素的浏览器默认样式，比如部分浏览器里伪元素可能有默认的黑色文字，需要单独给伪元素加样式修正。
  • 原写法直接给*:before/*:after设置color: var(--color)，强制伪元素使用变量值，彻底避免默认样式干扰。
• 灵活性差异
  • 用变量的写法可以在任意元素上单独设置--color，甚至能通过JS动态修改变量值实现批量换色（比如主题切换），扩展性更强。
  • inherit的写法依赖父元素的color，要修改某个分支的颜色，要么给父元素加color，要么给子元素单独写color，灵活性不足。
• 默认样式覆盖能力不同
  • 浏览器自带默认样式的元素（比如<a>标签默认蓝色），* { color: inherit; }会让<a>继承父元素的color，但如果父元素没设置color，还是会回到浏览器默认色。
  • 原写法通过给<a>设置--color变量，直接让<a>的color使用变量值，彻底覆盖浏览器默认样式，颜色更可控。

内容的提问来源于stack exchange，提问作者Max