---

title: CSS @scope 选择器：样式作用域与冲突隔离

keywords:

• CSS @scope
• 作用域选择器
• 样式隔离
• 组件封装
• 优先级

description: 解释 @scope 的作用域语法与优先级规则，将样式限定到特定根元素或容器，避免全局规则泄漏与冲突。

date: 2025-11-27

sources:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
• https://web.dev/scope/

categories:

• 文章资讯
• 编程技术

---

概述

@scope 为一组样式定义作用域根与选择器范围，允许在不使用 Shadow DOM 的情况下实现样式隔离与更清晰的层级管理。

语法（已验证）

@scope (.card) {
  h2 { margin: 0 }
  .btn { color: var(--accent) }
}

• 作用域根可以是选择器或 :scope；内部选择器相对作用域根解析（来源）

实践建议

• 与 @layer、容器查询配合；避免跨作用域覆盖导致的不可预期行为