No Login Data Private Local Save

@scope CSS At‑Rule Playground - Online Scoped Styles

Developer Tools Educational CSS @scope scoped styles
53
0
0
0

CSS @scope Playground

Chrome 118+
提示：您的浏览器可能不完全支持 CSS @scope 规则。该特性在 Chrome 118+、Edge 118+ 中可用。如预览中样式未按预期隔离，请切换至支持的浏览器查看完整效果。
浏览器支持检测：您的浏览器支持 CSS @scope，预览效果将完整展示作用域隔离。
预设示例：
HTML 内容 被样式作用的目标HTML
CSS @scope 规则 编写 @scope 作用域样式
实时预览
作用域状态就绪
关于 CSS @scope 的常见问题

CSS @scope 是一个CSS at-rule，用于创建样式作用域。它允许开发者将一组CSS规则的作用范围限制在特定的DOM子树内，防止样式泄漏到页面其他部分。语法为 @scope (selector) { /* 规则 */ }，其中selector定义了作用域的根元素。在作用域内部，:scope 伪类指向作用域根元素本身。这是原生CSS中实现真正样式封装的重要一步。

@scope (start) to (end) 语法定义了一个作用域区间。样式从匹配 start 选择器的元素开始生效，到匹配 end 选择器的元素（及其后代）之前结束。这在限定文章内容区域（例如从正文开始到评论区之前）时非常有用。区间内的同级元素及其后代都会受到作用域影响，而 end 选择器匹配的元素及其后代则被排除在外。

Shadow DOM 提供了完全隔离的样式边界（内外样式互不影响），适合Web组件封装。而 @scope 提供了一种轻量级的隔离方案：它只限制样式向下渗透（作用域内的样式不会泄漏到外部），但不阻止外部样式进入作用域。@scope 更适合在常规DOM中管理CSS优先级和限制样式影响范围，无需创建Shadow DOM的开销。

截至2024年，Chrome 118+、Edge 118+、Opera 104+ 和 Samsung Internet 25+ 已支持 @scope。Firefox 和 Safari 目前仍在开发支持中。在不支持的浏览器中，@scope 规则会被忽略，其内部的选择器将作为全局样式生效，这正是 @scope 要解决的问题。建议在使用时提供降级方案或使用支持检测。

@layer 控制优先级层级（哪些样式优先），而 @scope 控制空间范围（样式在哪里生效）。两者可以组合使用：将 @scope 规则放置在 @layer 内部，既能控制样式的作用范围，又能管理级联优先级。例如 @layer components { @scope (.card) { ... } } 可以创建一个低优先级、仅作用于卡片内部的样式层。

在 @scope 规则内部，:scope 伪类始终指向作用域根元素（即 @scope 选择器匹配的元素）。例如 @scope (.card) { :scope { border: 2px solid blue; } } 会为每个 .card 元素本身添加蓝色边框，而不会影响页面中其他元素。这与 JavaScript 的 querySelectorAll 中的 :scope 行为一致。
🔧 Related Tools