贴一段 HTML，写一条 CSS 选择器，立刻看清它命中了哪些元素：命中数量、每个元素的层级路径与文字摘要，并在沙箱预览里把命中的元素用红框标出来。选择器写错会直接把浏览器的报错告诉你。HTML 只在本地浏览器里处理，不会上传。
匹配判断用的是浏览器的原生 CSS 选择器引擎（等价于 document.querySelectorAll），元素总数按整个文档统计，因此会包含浏览器自动补上的 html、head、body 等节点。
*；后代与兄弟组合器（空格、>、+、~）；属性选择器（[type="email"]、[href^="https"]、[data-id]）；结构伪类（:nth-child()、:first-child、:last-child、:only-child、:empty、:not()）；选择器列表（用逗号并列）。:hover、:focus、:active、:visited）在静态匹配里不会命中；伪元素（::before、::after）不是真实元素节点，querySelectorAll 匹配不到；预览里的脚本被限制在沙箱内，无法访问本站页面或本机文件。发布日期: 2026-09-13
描述: CSS选择器测试器用于验证 CSS 选择器在给定 HTML 上命中了哪些元素，支持结构伪类、属性选择器与组合器，帮助定位样式不生效的原因。
使用方法: 1. 在左侧 HTML 编辑区贴上或改写要测试的 HTML，在「CSS 选择器」里写一条选择器，点「测试」或按 Ctrl+Enter 运行。2. 选「示例」可载入类与后代、nth-child 与表格、属性选择器、组合器、:empty 与 :not()、无效选择器等示例。3. 右侧沙箱预览会渲染这段 HTML 并用红框框出命中的元素，下方按序号列出每个命中元素的标签、层级路径与文字摘要（最多 100 条）。4. 顶部统计显示命中元素数、文档元素总数与匹配占比；选择器写错时会直接给出浏览器的报错信息。5. 匹配列表可复制或下载为 TXT 文件，预览高度可在 240/340/460px 之间切换。
代码高亮工具把源码按选中的语言着色，可自动识别语言并给出识别结果，输出带行号的高亮结果，内置多套浅色与深色主题可随时切换。
Scheme在线运行器工具用于在浏览器里执行 Scheme 代码，支持标准输出、报错信息显示与运行超时终止，帮助初学者学习 R7RS 语法与函数式编程。
Prolog在线运行器工具用于在浏览器里执行 Prolog 程序，支持事实与规则、递归查询、多解答枚举与超时中止，帮助初学者练习逻辑编程。
暂无评论，来发表第一条评论吧！