CSS 选择器演示
在浏览器里试验 CSS 选择器：编辑 HTML 片段并输入选择器，实时高亮命中的元素，显示命中数量与匹配到的标签路径，非法选择器当场给出提示。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
输入
选择器由浏览器原生解析，支持逗号并列、后代、> + ~、属性选择器、:nth-child() 与 :not()
实时高亮
命中的元素会加上高亮边框
UniKit
即开即用的在线工具箱
匹配结果
命中数量： 0有效选择器： 0
没有匹配到任何元素，换个选择器试试
这个工具能做什么
- 写选择器前先在浏览器里验证：输入选择器，命中的元素会立刻高亮，不用改代码再刷新页面。
- 确认 :nth-child()、属性选择器、:not() 这类容易写错的语法到底命中了谁，命中数量和元素路径都会列出来。
- 给同事解释「这段 CSS 会作用到哪些元素」时，把匹配路径直接贴过去比口头描述清楚。
- 教学或自学 CSS 时对照练习：改 HTML 片段再改选择器，立刻看到匹配范围的变化。
示例
输入
HTML 片段：<ul class="tags"><li class="tag">CSS</li><li class="tag">Vue</li><li class="tag">Astro</li></ul> 选择器：.tag
输出
命中数量：3 li.tag:nth-child(1) li.tag:nth-child(2) li.tag:nth-child(3)
匹配由浏览器原生的 querySelectorAll 完成，只在示例片段内部查找，不会影响页面其它元素；节点路径会带上 :nth-child(n) 便于定位。
常见问题
选择器匹配是怎么实现的？
直接把你的选择器交给浏览器的 document.querySelectorAll 执行，并且只在预览片段这个容器内查找。因此匹配结果和真实浏览器行为完全一致，包括浏览器不支持的选择器会直接报语法错误。
逗号分隔多个选择器会怎样？
会按逗号拆成多个选择器分别校验，再合并成一次查询。命中数量是去重后的元素个数，所以同一元素被两个选择器同时命中只算一次。
什么时候会提示选择器语法错误？
组合器出现在开头或结尾（比如 > .card）、括号或方括号不配对、引号没闭合，以及浏览器本身不认识的语法。前几种由工具提前拦截，最后一种由浏览器抛出。
修改 HTML 片段会影响当前页面吗？
不会。片段是通过 v-html 渲染在一个独立的预览容器里的，只在这块区域匹配，页面其它元素不受影响。高亮样式也是临时加的行内 outline，改动选择器就会清掉。
为什么粘贴了页面其它地方的 HTML 却匹配不到？
预览容器内的 HTML 是完整的，但如果片段本身没闭合（比如少了 </div>），浏览器解析时会自动补全并调整层级，导致结构和你写的不同。先检查片段是否闭合，再看匹配路径。
关键词：cssselectorcss 选择器queryselectorqueryselectorallnth-child属性选择器attribute selectornotweb 开发