CSS变量未定义时继承异常：为何未继承父元素样式？

问题核心 #

当给.text-overlay p添加包含未定义CSS变量的样式规则时，元素没有继承.myapp p的样式，而是使用了用户代理样式表的默认值；但如果.text-overlay p的样式块为空，就能正常继承.myapp p的样式。

原因解析 #

这是CSS变量的无效值处理机制导致的：

• 当var()引用的变量未定义时，这条属性声明会被判定为无效。
• 浏览器处理无效声明时，不会回退到继承的样式值，而是直接将该属性重置为初始值（即用户代理样式表中定义的默认值，比如font-size: 16px）。
• 而当.text-overlay p的样式块为空时，没有任何属性声明覆盖继承链，所以元素会正常继承.myapp p的样式。

对尝试方案的分析 #

1. 将inherit作为var()默认值：这个方法是有效的。当变量未定义时，var(--OverlayBodyFontSize, inherit)会让属性值设为inherit，强制元素继承父链中.myapp p的样式。
2. 添加父选择器.myapp .text-overlay p：这个方法无效。无论选择器优先级多高，只要变量未定义，属性声明依然是无效的，浏览器还是会使用属性的初始值，而非继承值。

正确解决方案 #

方案1：用inherit作为默认值 #

确保变量未定义时，属性强制继承父元素样式：

.text-overlay p {
  font-size: var(--OverlayBodyFontSize, inherit);
  line-height: var(--OverlayBodyLineHeight, inherit);
}

方案2：回退到父选择器的变量逻辑 #

如果希望变量未定义时直接复用.myapp p的样式规则，可以嵌套使用var()：

.text-overlay p {
  font-size: var(--OverlayBodyFontSize, var(--BodyFontSize, 20px));
  line-height: var(--OverlayBodyLineHeight, var(--BodyLineHeight, 24px));
}

这样既保留了自定义变量的优先级，又能在变量未定义时，直接使用.myapp p对应的样式值。

验证示例 #

修改后的完整代码如下，取消注释后即可看到预期效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --BodyFontSize: 30px;
      --BodyLineHeight: 20px;
    }

    .myapp p {
      font-size: var(--BodyFontSize, 20px);
      line-height: var(--BodyLineHeight, 24px);
    }

    .text-overlay p {
      font-size: var(--OverlayBodyFontSize, inherit);
      line-height: var(--OverlayBodyLineHeight, inherit);
    }
  </style>
</head>
<body>
  <div class="myapp">
    <p>Default Font Styling</p>
    <div>
      <div class="text-overlay">
        <p>Expected Style Override To Inherit From .myapp rather than the user agent. Because --OverlayBodyFontSize and --OverlayBodyLineHeight are undefined</p>
      </div>
    </div>
  </div>
</body>
</html>

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