摘要

  • W3C 2021 年首份 CSS Cascade Level 6 公开草案提出 @scope，用根与可选下界限定样式，还让较近的根参与冲突决策；当时根选择器的权重会加到内部规则上。
  • 2023、2024 年草案把根的权重与内部规则分开，明确下界、距离和全局 CSS 名称的适用范围；围栏管匹配位置，根本身不再给每条内部规则抬高身价。

想象网页上有两间工作室。外层卡片负责整页，给按钮刷蓝漆；内层卡片展示一件作品，自己的按钮想刷珊瑚红。写一串祖先选择器当然可以，把每一层门牌都写进地址，搬一次家就改一次导航。组件工具还有一招：给范围内的每个元素盖章，再给每条选择器贴上对应的属性。油漆确实不容易跑错房间，但网页里每个杯子都得佩戴工牌。为了让一个按钮住在自己家，代价未免太热闹。

W3C 2021 年 12 月 21 日的首份公开草案 正面摆出了这种满页 data-scope 标签的做法，并提出 @scope。作者可以指定作用域根，也可以指定一个下界，在区块里写普通的样式规则。只给根立门牌，子孙元素便不必人人别徽章。草案还讨论“谁更近”：当作用域规则都落到一个元素上，浏览器可以沿元素树数步数，看看哪个根离它更近。距离由共同的算法来算，不必由每个团队藏进选择器长度。

早期方案的围栏有点过于威风。同一份 2021 草案把根选择器的权重加到了内部规则上。若根是 #hero，里面的 img 规则会连带取得 ID 的分量。门口挂了一块牌子，屋里所有家具突然都拿到贵宾证。草案还在讨论距离应该在级联里占多大份量。这些未定之处很重要：后来读到熟悉的 @scope 语法，不能把后来的计算办法倒灌进第一版。

2023 年 3 月 21 日草案 作了关键切割。@scope 前导部分不再给内部选择器加权。草案把 @scope (#hero) { img { ... } } 与 :where(#hero) img { ... } 并排比较，两者权重都是 (0,0,1)。#hero 决定围栏从哪里立起，计分的是里面的 img。这样，范围边界可以准确，却不会因为根的名字很具体，就自动压过附近作者的所有规则。认门牌和抢话筒是两件事。

范围也可以有终点。to (...) 允许外层规则在某个内层区域前停下，仿佛油漆滚筒到门槛处收手。内层卡片再决定自己的按钮怎样上色。若两条作用域规则在级联相关阶段仍发生冲突，距离根更近的一条可以取得优势；这里的距离是元素树上的步数，不是屏幕上的像素，也不是选择器看起来有多长。这样的选择保留了共同规则，同时让每个组件的作者有地方行使自己的判断。

2024 年 9 月 6 日草案 又把门槛画得更清楚：命中下界的元素被排除在范围外，距离按一个作用域根到被选中元素之间的步数计算。修订记录写明移除了强距离选项，也回顾了根选择器权重不再传给内部规则的变化。草案还指出另一处容易误会的地方：写在 @scope 里的 @keyframes、@font-face、@layer 等定义名称的规则仍是全局的；其内部的样式规则才可能受作用域约束。围栏管的是样式匹配，不会把整套 CSS 世界封进私人领地。

W3C 发布时间线 钉住 2021、2023、2024 三次公开草案，CSS 工作组 2024 年的发布说明 也把 @scope 指为这一层级的新工作。真正值得看的，是规则变瘦的过程：先把样式圈在该去的地方，再撤掉根附带的自动加权，最后说明靠近究竟怎么算。外层卡片继续刷蓝，内层按钮由内层作者刷红；门口只需要一块门牌。