:scope伪类在CSS样式表中完全无效，仅在JavaScript的DOM查询API中由具体元素调用时才生效；纯CSS作用域应使用@scope规则。
:scope 伪类在 CSS 文件或 <style></style> 标签中写出来，**完全不生效**——它不会报错，也不会限制样式范围，浏览器会静默忽略或退化为等效于 :root。
为什么 :scope 在 CSS 样式表里无效？
CSS 解析器没有“当前元素”上下文。:scope 的语义只在 JavaScript 的 DOM 查询 API 中被明确定义：它必须由一个具体调用者（比如某个 Element 实例）触发，此时才指向该元素自身。
-
:scope .btn放在全局<style></style>里 → 匹配文档中任意位置的.btn，和直接写.btn完全一样 -
div:scope语法合法但无意义 → 等价于div，不带来任何作用域约束 -
document.querySelector(':scope p')会失败 → 因为document不是Element，不支持:scope
:scope 唯一有效的使用场景
只在 Element.prototype.querySelector()、querySelectorAll()、matches() 等方法中调用时有效，且必须由具体元素发起：
-
el.matches(':scope.active')比el.classList.contains('active')更统一，尤其适合封装通用判断逻辑 -
el.querySelectorAll(':scope > button')明确限定只查直系子级，避免用el.children遍历 + 类型过滤 -
this.shadowRoot.querySelector(':scope input')在 Shadow DOM 中安全定位，防止跨 boundary 匹配
@scope 规则才是真正的 CSS 作用域机制
如果你需要在纯 CSS 层面限制样式影响范围，应该用 @scope，不是 :scope：
-
@scope(.card) { h2 { color: #6a0dad; } }表示只有.card内部的h2受影响 - 目前仅 Chrome 125+、Firefox 117+、Safari 17.4+ 支持；旧版本会直接忽略整条
@scope规则 -
@scope(.card) to(.footer)中的.footer必须是.card的同级或更外层元素，否则to()不起作用 -
@scope块内写的:scope才有意义——它指向该块的根元素，例如@scope(.card) { :scope { border: 1px solid #e0e0e0; } }
真正容易被忽略的一点是：:scope 在 CSS 里写出来既不报错也不生效，开发者常反复调试选择器结构，却没意识到这不是写法问题，而是根本不在 CSS 样式层的能力范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
