@scope ... to 的内部下界是样式生效的排除边界，即从to指定节点起（含自身及后代）不再匹配该作用域规则，形成“甜甜圈”效果；其生效需to选择器为scope内真实DOM后代且为简单选择器，Chrome 125+支持，Firefox/Safari暂不支持。
什么是 @scope ... to 的内部下界
@scope 的 to 部分不是“作用范围的终点”，而是**样式生效的排除边界**：它定义一个 DOM 节点（必须是 <scope-root></scope-root> 的后代），从该节点开始，包括它自身及其所有后代，都不再匹配该 @scope 块内的规则。这叫“甜甜圈作用域”——中间被挖空。
常见误解是把它当“只作用到某一层”，其实它是“作用于 <scope-root></scope-root> 内部，但避开 <scope-limit></scope-limit> 及其子孙”。浏览器不会报错，写错就静默跳过整条 @scope 规则。
@scope (.card) to (.footer) 为什么没效果
失效几乎总是因为 HTML 和 CSS 的边界不匹配。关键检查点：
-
@scope (.card) to (.footer)要求 HTML 中存在同时满足两个条件的结构：<div class="card">...<div class="footer"></div>...</div>——.footer必须是.card的**真实 DOM 后代**，不能靠 JS 动态插入后补 -
.footer是类名，但@scope匹配的是选择器，所以 HTML 元素必须真有class="footer"；写成data-footer或id="footer"就不匹配 -
to后的选择器不能是伪类（如:last-child）、不能含组合器（如.card .footer），只能是单个简单选择器（.footer、[data-limit]、footer） - Chrome 125+ 默认启用，但若你用的是 Chrome 124 或更早，该语法直接被忽略
怎么验证 to 是否真的起作用
最可靠的方式是手动构造对照组，观察样式是否“在 limit 外生效、limit 内消失”：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
@scope (.card) to (.skip) {
p { color: red; }
.btn { background: yellow; }
}
对应 HTML：
<div class="card">
<p>这段变红</p>
<div class="skip">
<p>这段不红（被 to 排除）</p>
<button class="btn">按钮也不黄</button>
</div>
<p>这段又变红</p>
</div>
注意：.skip 内部的 <p> 和 <button> 不仅不应用 @scope 规则，也不会被外部同名规则“意外覆盖”——这是它和普通后代选择器的本质区别。
容易被忽略的限制和替代思路
to 不是万能的局部控制开关。几个硬约束必须记住：
-
to目标节点必须在 DOM 树中物理存在；JS 插入后不会触发重计算，得用CSSStyleSheet.replace()手动刷新样式表 - 不支持嵌套
@scope，也不能在to里用:is()或:where() - 如果需要“仅作用于某几层子元素”，
@scope ... to很难精准表达，此时 BEM 的层级命名（如.card__body/.card__footer）反而更可控 - Firefox 和 Safari 当前（2026 年 5 月）仍完全不支持
@scope，连to的语法解析都跳过
真正要落地“内部下界”语义，现阶段更稳的路径是：用 data- 属性标记区域 + 后代选择器 + 显式重置（如 .card [data-skip] p { color: inherit; }），而不是押注 @scope ... to。
