Summary

  • W3C 在 2021 年首份 CSS Nesting 公开草案中，让子样式规则嵌入父规则，并用 & 指向父选择器；写在嵌套规则后面的声明当时无效。
  • 2023 年草案允许声明与规则混排，却不保留两者的相对顺序；2026 年草案用“嵌套声明规则”保存作者写下的次序。

编辑正在做一张专题卡片。卡片的背景、标题和按钮本是一家人，样式却分居文件各处。她把按钮规则放进卡片规则里，文件终于像一张能看懂的平面图。收工前又补上一行颜色，位置在内层规则之后。浏览器这时得回答一个很生活化的问题：房间已经装修完，这位迟到的油漆工算不算按最后一笔结账？

W3C 2021 年 8 月 31 日的首份公开草案规定，内层样式规则的选择器相对于外层解释。& 是站在房间里指认父规则的门牌。草案同时提供直接嵌套和 @nest 两条路，后一种对选择器写法限制较少。设计并非纯粹为了缩进好看。解析器读到 color:hover 时，可能把它当选择器，也可能以为一条声明开始了；草案专门讨论了这种语法歧义以及可能没有上限的前瞻读取。

2021 年对迟到声明的办法很硬：声明必须先写，嵌套规则随后。规则后再写的声明无效，直接被忽略。作者为了让文件顺眼，把一行属性往下挪，颜色就没了。外屋可以套里屋，油漆工却得在里屋开工前全部离场。

到了2023 年 2 月 14 日的草案，单独的 @nest 入口已不见踪影，声明与嵌套规则可以交错书写。新问题是，文档明确说它们的相对顺序不会保留。纸面上排成前后两笔，进入层叠计算时未必照这个队列走。油漆工获准进门，却拿不到写在工单上的排号。

2026 年 1 月 22 日草案把排号补了回来。写在嵌套规则之后或夹在规则之间的声明，会隐式装进“嵌套声明规则”，保存它们原来的位置。看起来可以偷懒用一个 & { ... } 包起来，但草案解释了这种包装会影响伪元素和优先级，改动的就不只是队列。修订记录还留下过渡方案中 @nest 包装的痕迹，以及后来换成嵌套声明规则的过程。

W3C 的发布历史把 2021、2023、2026 三个节点排在一起。故事的表层是“规则终于能套规则”；真正让样式表住得安稳的，是浏览器能读懂父子关系，也能尊重作者写下的先后。编辑安排哪几间房相邻，浏览器负责别把最后来刷门框的人派去刷地基。按钮虽小，不该靠猜测施工顺序决定颜色。