← 首页 / How does CSS work · 样式从哪来 待审核 6 页

How does CSS work · 样式从哪来

你还一行 CSS 都没写,浏览器里的 <h1> 已经又大又粗、<body> 四周自带 8px 留白、<a> 是蓝色带下划线 —— 这些样式到底是谁给的?答案是一条四层的链路:属性的 initial value(规范默认)→ User-Agent Stylesheet(浏览器默认)→ Normalize(抹平浏览器差异)→ Reset(主动清零)。

每页都能动手:挑属性看它的值是哪一层给的、拖开关比较「有/无 UA 样式」、切 Normalize vs Reset 三种基线,逐个理解 initial / inherit / unset / revert 这几个能精确接管默认值的关键字,最后用 @layer 重排 cascade layer,看清「层顺序压过 specificity」的真正优先级模型。

取材自 Elad Shechter《How Does CSS Work?》,并对照 MDN / CSS Cascade & Inheritance 规范补足细节。

overview · 4 levels

四层默认样式：一个值的来路

把样式来源拆成四层叠在一起。挑一个属性(display / margin / color …)，看它的 initial value 是什么、UA stylesheet 又把它改成了什么、最终 computed 取哪个——解释「为什么 <div> 是 block，而 display 的 initial 其实是 inline」。

 level 1 · initial & 继承

规范默认值与继承

第一层：每个属性都有 spec 规定的 initial value，且分两类——可继承(color/font-*)会自动往子孙流，不可继承(margin/border)不会。在一棵祖孙树上改父值、切属性，实时观察哪些属性跟着变、哪些不变。

 level 2 · UA stylesheet

User-Agent Stylesheet

第二层：浏览器内置的一份样式表，专门给具体标签加默认(body{margin:8px}、h1{font-size:2em}、ul{list-style:disc}…)。一次剥离/切换剥离 UA 样式，看同一段 HTML 塌缩成裸结构——这就是 initial value 的呈现。

 level 3 & 4 · normalize / reset

Normalize vs Reset

第三、四层：同一段 HTML，在「裸 UA」「Normalize（留好用的、修不一致的）」「Reset（margin/padding 全清零）」三种基线下并排切换。看清两种思路的根本分歧——修平 vs 推平，以及现代 reset 留下了哪几条。

 keywords · initial/inherit/unset/revert · all · revert-layer/rule

CSS-wide 关键字

任意属性都能赋一个 CSS-wide 关键字来精确接管默认。核心四个：initial=规范默认、inherit=取父值、unset=可继承则继承否则 initial、revert=退回 UA/user 层。在嵌套元素上逐个试，对比 display:initial(→inline)与 display:revert(→block)的区别，再用 all 一次性归零；末尾延伸到 layer 级的 revert-layer 与 rule 级的 revert-rule。

 cascade · @layer

Cascade Layers:@layer

author 层内部还能再分层。@layer 把 CSS 分进若干有序的层，而 cascade 比优先级时先看层顺序、再看 specificity。拖动重排三层，观察 specificity 最低的规则只因排在最后一层就胜出；再开关那条 unlayered 规则——它无视层序始终压过 layered。这就是 CSS 完整的优先级模型。

🔗 相关链接

📐 规范 / 文档

  • CSS Cascading and Inheritance Level 5 · drafts.csswg.org / CSSWG 规范本体:cascade origin、继承、cascade layer,以及 initial/inherit/unset/revert/revert-layer 的权威定义。
  • MDN · Introduction to the CSS cascade · developer.mozilla.org UA / user / author 三个 origin 的优先级,以及每个属性页都有的「Initial value / Inherited」字段从哪查。
  • MDN · @layer / Cascade Layers · developer.mozilla.org cascade layer 的声明、排序、嵌套与 !important 反转 —— 「层顺序优先于 specificity」的权威说明。
  • Can I use · CSS Cascade Layers · caniuse.com @layer 的实时浏览器支持矩阵(Chrome 99+ / Safari 15.4+ / Firefox 97+)。

📖 延伸阅读

  • How Does CSS Work? · Elad Shechter 本系列的灵感来源:把样式来源拆成「四层」(initial value → UA stylesheet → Normalize → Reset)并梳理 reset 关键字的那篇短文。