用于局部样式的 @scope
使用 @scope at-rule，将 CSS 规则的作用范围限制在指定的子树中。
用于局部样式的 @scope 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
什么是 @scope？
@scope at 规则（Chrome 118+、Safari 17.4+）会将 CSS 规则限制在 DOM 的特定子树中。@scope 内的规则只会应用于声明的作用域根元素内部，从而防止样式泄漏到其他组件。
基本语法
使用作用域根选择器声明作用域。内部的所有规则只会应用于匹配的作用域根元素的后代，而不会应用于整个文档。
<div class="card">
<div class="title">Scoped Title</div>
<div class="body">Scoped body text — styles only apply inside .card.</div>
</div>
作用域根
作用域根（@scope (.card)）定义入口点。作用域内匹配 .title 的元素会应用样式。.card 外部带有 .title 类的元素不会受到影响，无需 Shadow DOM 即可实现真正的样式封装。
作用域限制（作用域边界）
可以使用 to 定义作用域边界：@scope (.card) to (.nested-card)。规则会应用于 .card 内部，但会在 .nested-card 后代处停止，从而将样式限制在一层组件嵌套中，并排除更深层的实例。
@scope 内的 :scope 伪类
在 @scope 块中，:scope 表示作用域根元素本身。@scope (.card) { :scope { border-radius: 8px; } } 会直接为 .card 元素设置样式，而不是为其后代设置样式。
邻近性优先级
@scope 引入了基于邻近性的优先级：当多个作用域匹配某个元素时，距离最近的祖先作用域根元素胜出，而不考虑选择器优先级。这可以防止深层嵌套组件的样式被远处祖先作用域中的样式覆盖。
@scope 与 CSS 模块的对比
CSS 模块会生成唯一的哈希化类名，在构建时实现作用域——这是 JavaScript 打包器需要处理的问题。@scope 无需构建工具、哈希化名称或特定框架语法，就能在浏览器中原生实现作用域——纯 CSS。
@scope 与阴影 DOM 的对比
阴影 DOM 会创建完整的样式隔离——外部样式无法穿透其中。@scope 会创建部分隔离——如果外部样式的特异性足够高，仍然可以影响作用域内的元素。对于不需要完整隔离的组件作用域控制，@scope 是一种更轻量的替代方案。
使用 @scope 进行分层
将 @scope 与 @layer 结合起来，可以实现精细的层叠控制：将组件作用域样式定义在组件层中。这样便能以可组合的方式，同时管理层叠顺序（通过层）和样式作用域（通过 @scope），无需复杂的类名命名技巧。
实际应用场景
设计系统组件：将所有按钮样式限制在 @scope (.button-group) 中，这样内部按钮样式就不会泄漏到外部。小部件隔离：将第三方小部件的样式限制在其容器内，避免与页面的全局样式发生冲突。
浏览器支持与回退
Chrome 118+、Safari 17.4+ 和 Firefox 128+ 支持 @scope。对于不支持它的浏览器，@scope 内的样式会被忽略——层叠会回退到全局样式。在组件作用域控制有益但并非关键时，可以将 @scope 用作渐进增强方案。
知识检查
传统 CSS 选择器单独使用时难以解决什么问题，而 @scope 可以解决？
总结
@scope 会将 CSS 规则的应用范围限制在声明的 DOM 子树中，无需阴影 DOM 或构建工具进行类名哈希化，就能实现原生样式封装。作用域限制、邻近特异性以及与 @layer 的集成，使 @scope 成为纯 CSS 中用于组件作用域设计系统的强大基础功能。
常见问题解答
「用于局部样式的 @scope」课时是免费的吗？
是的 — 「用于局部样式的 @scope」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「用于局部样式的 @scope」这节课中我会学到什么？
使用 @scope at-rule，将 CSS 规则的作用范围限制在指定的子树中。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「用于局部样式的 @scope」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 原生 CSS 嵌套
- :has() 关系伪类
- 用于局部样式的 @scope
- 视图过渡 API