:scope 在 css 中无效，它仅用于 javascript 的 queryselector 等运行时查询，不是样式作用域机制；真正实现局部样式的原生方案是 @scope 规则（chrome 125+），需配合 scope 属性使用。
:scope 本身不支持 CSS 回退样式设计——它根本不是用于样式声明的机制。你在 <style></style> 里写 :scope .btn，浏览器会当作普通选择器解析，:scope 被静默忽略，等效于 .btn。所谓“回退”，是误把 JS 运行时行为当成了 CSS 声明能力。
为什么 :scope 在 CSS 文件里写无效
根本原因在于 CSS 解析阶段没有“当前作用域元素”这个上下文。:scope 是为 querySelector 等 DOM 方法设计的运行时伪类，不是样式规则里的作用域锚点。浏览器遇到 :scope 时，要么当作无效伪类跳过整条规则（旧版 Chrome），要么降级为 :root（多数现代浏览器），结果就是：:scope .title 实际匹配整个文档中所有 .title，完全不局部。
- ❌
<style>:scope .card { border: 1px solid red; }</style>→ 全局生效，无隔离 - ❌
<style>@media (prefers-reduced-motion) { :scope .anim { animation: none; } }</style>→ 语法合法但语义失效 - ✅ 若真要局部样式，必须用
@scope规则（Chrome 125+）或预处理器/构建工具方案
@scope 是唯一原生 CSS 作用域方案，但它不兼容 :scope 伪类
@scope 和 :scope 名字相似，但定位完全不同：@scope 是 CSS 规则块，定义一组样式的作用边界；:scope 是选择器的一部分，只在 JS 查询中起作用。两者不能混用，也不能互相替代。
- ✅ 正确用法：
@scope (.card) { .card { padding: 1rem; } .card button { margin-top: 0.5rem; } } - ❌ 错误嵌套：
@scope (.card) { :scope { background: #f0f0f0; } }——:scope在这里无意义，且 Chrome 125+ 不支持这种写法 - ⚠️ 必须显式加
scope属性：<div class="card" scope></div>，仅靠 class 或 data- 属性无法触发
真正可行的回退策略：分层 + 特性检测 + 构建时注入
如果你需要在不支持 @scope 的浏览器中模拟局部样式效果，得绕开伪类，用可检测、可降级的组合方案：
- 用
@supports selector(:scope)包裹@scope规则 —— 但注意：该特性检测实际检测的是:scope选择器支持（即 querySelector 能力），而非@scope规则本身，所以不可靠 - 更稳的做法：构建时生成带命名空间的 class，例如
.my-component__button，再通过 PostCSS 插件自动添加属性选择器.my-component__button[data-scope="my-component"] - 运行时 fallback：用 JS 检测
CSS.supports('selector(:scope)') && CSS.supports('@scope')，若失败，则动态插入 scoped 类名并启用 BEM 风格样式表
真正麻烦的不是怎么写 :scope，而是很多人把它当成 Vue 的 <style scoped></style> 或 CSS Modules 的替代品。它不是。它只是一个查询辅助工具，连样式隔离的边都没挨上。想靠它做回退，等于试图用螺丝刀拧紧焊接点——方向错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
