CSS 与布局 / How does CSS work · 样式从哪来 / CSS-wide 关键字 待审核 5 / 6
keywords · initial/inherit/unset/revert · all · revert-layer/rule

CSS-wide 关键字

前面几页讲清了「值从哪几层来」。这页讲控制手段:任何属性都能赋一个 CSS-wide 关键字,精确指定它该取哪一层的值——这才是真正「接管默认值」的工具。最核心、最常用的是下面四个:

  • initial——回到规范初始值(Level 1),无视继承、无视 UA。
  • inherit——强制取父元素的 computed 值,哪怕这属性本来不继承。
  • unset——按属性天性解析:可继承属性 = inherit,否则 = initial
  • revert——退回低一级 origin:author origin 的声明被撤掉后落到 user origin,user 的落到 UA,UA 的则等同 unset。日常写 CSS 时多半没有 user 样式,于是观感上就是「落回浏览器默认」;若 user 与 UA 都没有该属性的声明,最终走 defaulting(可继承则继承,否则取 initial value)。
图 1 · 四个 CSS-wide 关键字逐属性的效果对照,同时标出该属性是否可继承。

display 那一组:initial<div> 变回 inline(规范初始值),而 revert 让它回到 block(UA 的值)。这俩天差地别——想「恢复浏览器默认外观」时,要的几乎总是 revert,而不是 initial。这是最常见的误用。

1 · 整体重置:all 一次性归零

all 是「除 direction / unicode-bidi 与自定义属性外所有属性」的简写,取值只能是 CSS-wide 关键字——除上面四个外,还包括 revert-layerrevert-rule(Chrome 151 实测 CSS.supports('all', 'revert-rule') 为 true)。要注意 all: revert 不是样式隔离:可继承属性回落后没有声明可用,会继续从父元素继承,实测父级的 color: rgb(255,0,0) / Georgia / 33px 照样穿透;all: initial 才把它们打回 rgb(0,0,0) / Times / 16px,且 direction 与自定义属性仍不受影响(核对于 2026-08)。

图 1-1 · all 配各关键字对整张卡片的整体重置效果。

还有个 revert-layer:当用 @layer 组织 CSS 时,它撤掉当前层里的声明,让属性落到更早的层里优先级最高的那条(不必是紧邻的前一层),而 revert 是退回整个 origin 之下。若同一 origin 里没有更低优先级的声明,它会继续回落到前一个 origin——实测单层的 @layer solo { h1 { font-size: revert-layer } } 直接落到 UA 的值。另外 unlayered 样式相当于最后一层,写在其中的 revert-layer 会落到最后一个 layer。例如:

@layer base   { a { color: blue } }
@layer theme  { a { color: revert-layer } }  /* → 回到 base 的 blue */

粒度再细一档——revert-rule:它撤掉的既不是整个 origin、也不是整个 layer,而是当前这一条 style rule 内的声明,让该属性的层叠值按「这条 rule 根本不存在」重算——落点可能是同层另一条 rule,也可能是另一个 layer、另一个 origin,甚至 defaulting。三个 revert 系关键字逐级收窄的是撤掉的声明范围revert(origin)→ revert-layer(layer)→ revert-rule(rule),而回落的深度都可能一路到底。在 CSS animation 中它的行为等同 revert-layer

p         { color: blue; font-weight: bold }
p.special { color: revert-rule }  /* 只忽略本 rule 的 color → 回到 p 的 blue;font-weight 仍 bold */

**兼容性:**Chrome 151 实测已可用(CSS.supports('color', 'revert-rule') 为 true,且同一条 rule 内未被撤销的声明保持不变),Firefox 150 起加入,Safari 的状态需另行实测(核对于 2026-08)。

2 · 一句话记忆

关键字 取哪一层 典型用途
initial 规范初始值(Level 1) 要属性规范定义的初始值
inherit 父元素 computed 值 强行让不继承的属性也跟父走
unset 继承则父值,否则初始值 「擦掉我写的,按属性天性来」
revert 退到低一级 origin:author→user→UA 恢复浏览器默认外观
revert-layer 更早的层里优先级最高的值,无则退到前一个 origin 在分层 CSS 里撤掉本层
revert-rule 按「这条 rule 不存在」重算层叠值 只撤掉某一条 rule 的声明

延伸阅读:MDN · all 与 CSS-wide keywords——all 简写的适用范围(排除 direction / unicode-bidi 与自定义属性)以及 revert / revert-layer 的逐项细节与兼容表;rule 级的 MDN · revert-rule 另有专页(含兼容表)。