:scope 在 CSS 文件或 标签中完全无效，仅在 JS 的 querySelector 等 DOM 查询方法中有效，且仅指向调用该方法的元素自身；浏览器解析样式表时无运行时上下文，:scope 被当作 :root 处理。
:scope 在原生 CSS 文件或 <style></style> 标签中**完全无效**，它只在 JS 的 querySelector / querySelectorAll 等 DOM 查询方法中起作用，且仅指向调用该方法的元素自身。
为什么 :scope 在 CSS 文件里不生效
浏览器解析样式表时，并没有“当前作用域元素”的概念 —— :scope 在样式表中会被当作 :root 处理（即 document.documentElement），等效于写 html { ... }。这不是 bug，而是规范定义：CSS 选择器本身不具备运行时上下文绑定能力。
- 你在
<style></style>里写:scope .btn，实际匹配的是整个文档中所有.btn，和直接写.btn没区别 - 哪怕你把它放在某个组件的
<style scoped></style>里（如 Vue），:scope依然不会自动绑定到该组件根节点 —— Vue 的scoped是靠属性选择器（如[data-v-xxx]）实现的，和:scope无关 - MDN 明确指出：目前尚无标准方式在样式表中显式建立
:scope的作用域锚点
:scope 真正能用的唯一场景：JS 中的局部查询
它只在 element.querySelector(':scope > .item') 这类调用中有效，此时 :scope 就是那个 element 本身。这是它唯一被浏览器稳定支持的用途。
- 替代硬编码父选择器：
root.querySelectorAll('.container .item')可能误匹配外部同名结构；而root.querySelectorAll(':scope .item')保证只查root内部 - 避免重复传参：封装函数时不用再把
root当参数传两次，选择器自带语义锚点 - 注意兼容性：
:scope在querySelector中的支持始于 Chrome 125、Firefox 117；旧版本会静默忽略整条选择器，不报错也不匹配 - Safari 支持
{ scope: true }选项，但这是实验性 API，不能用于生产环境
别把 :scope 和 Vue 的 scoped、CSS Modules 混为一谈
:scope 是一个运行时 DOM 查询伪类，和构建时样式隔离技术（如 <style scoped></style>、CSS Modules、Shadow DOM）完全无关。它们解决的问题不同，机制也互不兼容。
立即学习“前端免费学习笔记（深入）”；
-
<style scoped></style>依赖编译器给标签加属性，再用属性选择器模拟局部作用域；:scope不参与这个过程 - 想让样式只作用于某元素内部？用属性选择器更可靠：
[data-section="user-list"] .avatar - 想穿透 scoped 样式影响子组件？该用
:deep()或:slotted()，不是:scope - 试图在 CSS 文件里写
:scope来“模拟 scoped”只会带来幻觉，实际毫无作用
真正需要限制选择器范围时，优先考虑明确的属性选择器或 JS 查询逻辑；:scope 不是样式隔离方案，它只是 querySelector 的一个语法糖，而且糖还只在特定条件下才甜。
