@scope 是 CSS 新增的作用域机制，用于限制样式在特定 DOM 子树内生效，但截至2024年中尚未标准化，Chrome 125+ 仅实验性支持，Firefox 和 Safari 不支持，生产环境不可用。
什么是 @scope？它现在能用吗
@scope 是 CSS 新增的作用域机制，用于限制样式规则只在特定 DOM 子树内生效，类似 JS 的块级作用域。但它**目前（2024 年中）尚未进入正式标准稳定阶段，Chrome 125+ 仅作为实验性功能默认启用，Firefox 和 Safari 完全不支持，且需手动开启 flag 或等待后续版本。
也就是说：别在生产环境直接写 @scope，也别指望它能替代 class 或 CSS-in-JS 方案。它目前是“可玩不可靠”的状态。
- Chrome 中需确保启用了
chrome://flags/#enable-css-scope（新版 Chrome 可能已默认开启） - 使用时必须配合有效的
scope-start和scope-end元素，否则整条规则会被浏览器忽略 - 不能嵌套
@scope块（当前规范不支持）
@scope 的基本写法和触发条件
它不是独立选择器，而是包裹一组规则的容器，语法形如：
@scope (.card) {
h2 { color: blue; }
p { font-size: 0.9em; }
}
但注意：上面这段代码**不会生效**——因为 @scope 要求明确指定一个“范围根节点”，且该节点必须真实存在于 DOM 中，并被标记为 scope boundary。正确写法需配合 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
- HTML 中需有带
scope-start属性的元素（如<section scope-start>） - 或使用
scope属性（<section scope>），此时该元素即为 scope root - CSS 中的
@scope必须匹配这个 root 的选择器，例如@scope (section[scope]) - 若用类名匹配（如
@scope (.card)），则对应 HTML 元素必须同时有scope属性：<div class="card" scope>
为什么写了 @scope 却没效果
最常见的失效原因不是语法错，而是边界未正确定义。浏览器会静默丢弃所有无法解析 scope root 的 @scope 规则，不报错也不渲染。
- 检查 HTML 是否真有带
scope或scope-start属性的元素（注意：不是 class 名，是 attribute） - 确认 CSS 中的选择器与 HTML attribute 匹配方式一致（
[scope]≠.scope） - 避免在
<style>标签里写@scope后立即操作 DOM —— 若 JS 动态插入 scope 元素，CSS 已解析完毕，不会重新计算 - DevTools 的 Elements 面板里看不到 scoped 样式被“折叠”或特殊标识，只能靠手动验证元素是否命中规则
替代方案比 @scope 更可靠
如果你真正想要的是“局部样式”，现阶段更稳妥的做法仍是：
- 用 BEM 命名（如
.card__title）配合唯一 class 前缀 - 用
:scope伪类做相对查找（article:scope > h2），它已广泛支持 - 在框架中用 CSS Modules 或
<style scoped>（Vue）这类编译期隔离方案 - Shadow DOM —— 真正的作用域隔离，但需主动创建
attachShadow()，开销和兼容性需权衡
把 @scope 当作未来可选项观察即可，现在花时间调通它，不如先确保 scope attribute 和对应选择器在页面里真的存在、可选中。
