@scope to 的边界必须是真实存在的 DOM 后代节点，仅匹配第一个符合条件的简单选择器元素，不存在则整条规则静默失效；省略 to 最常用且安全。
@scope to 的边界必须是真实存在的 DOM 后代节点
你写 @scope (section[scope]) to (footer) { ... }，浏览器不会去“找最近的 footer”——它只检查 DOM 中是否存在一个 **既是 section[scope] 的后代、又匹配 footer 选择器** 的元素。如果不存在，整条 @scope 规则直接跳过，不报错也不生效。
常见错误现象：
- HTML 里写了
<section scope><article></article></section>，CSS 写@scope (section[scope]) to (article) { p { color: blue; } }→ ✅ 有效，因为article真实存在且是后代 - HTML 同样结构，但 CSS 写
@scope (section[scope]) to (footer) { p { color: red; } }→ ❌ 完全无效，DOM 中无footer - JS 动态插入
footer节点后，已解析的@scope不会重计算 → 仍无效，除非手动替换样式表
@scope to 不支持伪类、属性选择器或复合选择器作为终点
to 后面的 <limit></limit> 只接受简单选择器：标签名（footer）、ID（#end）、class（.stop）或属性选择器（[data-end]），但必须满足两个硬条件：一是它必须能精确匹配一个真实元素，二是该元素必须在作用域根的 DOM 子树中。
不能用的写法包括：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
@scope (div[scope]) to (:nth-child(2))→ 伪类不被允许 -
@scope (main[scope]) to (.sidebar[data-active="true"])→ 复合选择器（class + 属性）不被支持 -
@scope (article[scope]) to (header + section)→ 相邻兄弟选择器不被支持 -
@scope (section[scope]) to ([scope-end])→ 即使写了<section scope><div scope-end></div></section>，也因规范未定义该属性语义而失效
省略 to <limit> 才是最常用、最安全的用法
绝大多数实际场景下，你根本不需要显式设下界。只要 <scope-root></scope-root> 存在，它的整个子树天然就是作用域范围——这比手动指定 to 更可靠、更易维护。
比如：
<article scope>
<h1>Title</h1>
<div class="content">...</div>
<footer>© 2026</footer>
</article>
<p><style>
@scope (article[scope]) {
h1 { font-size: 1.5em; }
.content { line-height: 1.6; }
/<em> footer 也会被影响 —— 这通常正是你想要的 </em>/
}
</style>此时 footer 自然属于作用域内；若你真想排除它，正确做法不是加 to，而是换结构：把 footer 移到 article 外，或用独立 scope 标记它。
DevTools 看不到 to <limit> 的作用效果
Chrome 125+ 的 Elements 面板完全不标记 @scope 边界，也不会折叠 scoped 样式。你无法靠视觉确认 to 是否生效——只能靠手动检查目标元素的 computed styles，看规则是否命中，以及对比同级但位于 <limit></limit> 之后的元素是否真的没被染色。
容易被忽略的关键点：
-
to不是“截止到某元素为止”，而是“截止到该元素及其所有后代”——也就是说，匹配上的<limit></limit>元素自身和它的子元素都不受作用域内样式影响 - 如果 DOM 中有多个匹配
<limit></limit>的节点，**只取第一个**（按树遍历顺序），后续的不参与计算 - 没有 fallback 机制：一旦
<limit></limit>不存在，整块规则静默失效，连<scope-root></scope-root>内部的基础样式都不会应用
