:scope 只在元素自身的 querySelector 方法中生效，代表该元素本身；在 CSS 文件或 document.querySelector 中无效，且不支持 IE，Chrome 28+、Firefox 32+、Safari 15.4+ 支持。
为什么 :scope 看起来没生效？
因为浏览器默认不把任意元素当作 :scope 的锚点——它只在 querySelector() / querySelectorAll() 这类方法中被显式激活，且必须配合 Element#querySelector（而非 document.querySelector）使用。直接写在 CSS 文件里、或用 document.querySelector(':scope span')，:scope 都不会起作用。
-
:scope不是全局选择器，它依赖调用它的宿主元素（即“作用域根”） - 只有通过
element.querySelector(':scope > .item')这种方式调用时，:scope才代表element - 在 CSS 文件中单独写
:scope { color: red; }是无效的，目前无浏览器支持这种用法
:scope 在 querySelector 中怎么用才对？
核心就一条：必须调用目标元素自身的 querySelector 方法，不能从 document 或父容器“越级”调用。它本质是语法糖，替代重复写 element 本身。
- ✅ 正确：
const list = document.getElementById('my-list'); list.querySelector(':scope > li:first-child')→ 匹配#my-list的直接子<li> - ❌ 错误：
document.querySelector('#my-list :scope > li')→ 这里:scope没绑定任何元素，行为未定义（多数浏览器当普通标签忽略） - ⚠️ 注意：
:scope在伪类链中位置敏感，:scope:hover合法，但:hover:scope无效
和 .children / querySelector 字符串拼接比，有什么实际好处？
主要省去手动构造选择器字符串，避免注入风险，也少一次 DOM 遍历；但不是性能银弹，别指望它加速渲染。
- 用
:scope可安全复用动态变量：el.querySelector(':scope > [data-id="' + id + '"]')→ 实际仍需转义，但至少结构清晰 - 不用
:scope时，常有人写el.querySelector(el.tagName + ' > .target')，结果在 SVG 或自定义元素里出错（el.tagName大写、含命名空间） - 兼容性要查清：Chrome 28+、Firefox 32+、Safari 15.4+ 支持；Edge 79+（Chromium 内核后）OK；IE 完全不支持
容易被忽略的边界情况
:scope 的“作用域”严格限定为调用它的那个元素节点，不继承、不穿透、不模糊匹配。
立即学习“前端免费学习笔记（深入）”；
- 如果
el是文本节点或注释节点，el.querySelector(':scope')直接抛错：TypeError: Illegal invocation -
:scope不影响伪元素匹配，:scope::before合法但几乎无用（它只选中自己生成的内容，无法用于样式控制） - 在 Shadow DOM 中，
:scope仍指向调用它的 light-DOM 元素，不会自动跳进 shadowRoot —— 想限制在 shadow 内，得先取el.shadowRoot再调用
