CSS :scope 选择器

对照 :scope 在 querySelectorAll 与 @scope 规则中的用法，区分作用域根、直接子元素、后代元素与兄弟元素，支持关键词过滤、效果高亮与一键复制示例代码，全部在浏览器本地完成。

:scope 用法对照表共 6 种选择器

快速过滤

直接定位选择器

选择器	匹配对象	典型用途

点击表格行可查看详细说明、作用域高亮与示例代码。

作用域高亮

前一个兄弟

.card 作用域根直接子元素

嵌套后代

后一个兄弟

当前选择器:scope

匹配对象作用域根元素

层级关系根

作用域限定于 .card

高亮的元素即为当前选择器匹配到的目标，观察作用域根与兄弟元素的高亮范围。

示例代码

使用规则

需要在某个元素范围内查询时，用 :scope 明确限定起点，避免误匹配外层元素。
:scope > * 是选择直接子元素的可靠写法，语义清晰且兼容性好。
相邻兄弟 :scope + .sibling、后续兄弟 :scope ~ .later 用于同级元素定位。
@scope 规则配合 :scope 可限定样式作用边界，避免样式外泄。
:scope 在现代浏览器中均已支持，无需添加厂商前缀。