CSS revert关键字未遵循继承规则的原因探究

你遇到的问题核心是对revert的工作机制理解有偏差——它并不是直接强制继承父元素样式，而是将属性值恢复到该元素对应属性的「默认来源」，这个逻辑分两种情况：

• 如果浏览器的用户代理样式（元素默认样式）对当前元素的该属性有明确赋值，revert会直接恢复到这个默认值；
• 只有当用户代理样式中该属性的规则是「继承父元素」时，revert才会表现出继承父元素样式的行为。

回到你的代码例子：

.container {
  font-weight: normal;
}

.header {
  font-weight: revert;
}

<div class="container">
  <h1 class="header">there</h1>
</div>

浏览器对<h1>元素的默认样式里，font-weight被预设为bold。所以当你给.header设置font-weight: revert时，这个关键字会让属性值回到浏览器的默认bold，而不是继承父元素的normal——这就是你看到不符合预期结果的原因。

对比inherit关键字就能直观区分：

• inherit是强制忽略浏览器默认值，直接继承父元素的样式；
• revert是优先遵循浏览器给该元素的默认规则，没有默认规则才会继承父元素。

可以用下面的代码验证这个逻辑：

/* 覆盖浏览器h1的默认样式，让它默认继承父元素 */
h1 {
  font-weight: inherit;
}

.container {
  font-weight: normal;
}

.header {
  font-weight: revert;
}

此时<h1>会显示normal，因为revert回到的是我们修改后的用户代理规则（inherit），从而继承父元素的样式。

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