前端改版回归检查
重构导航栏的 CSS 后，担心 `:hover` 和 `:focus-within` 伪类在深层嵌套的 `<li>` 上失效。手动点开浏览器 DevTools 检查每个子菜单太耗时，且容易漏掉 `:nth-child(odd)` 在动态列表上的偏移。用本工具直接粘贴重构后的选择器字符串，实时高亮命中的 DOM 元素，一眼看出 `#nav > li:nth-child(3)` 是否真的指向了“产品中心”下的第三个子项，而非误中第二个。
HTML 源码 · 可编辑
速 查Cheat Sheet · 点击填入并即时试
实时预览
— 命中
命中元素click to locate
就绪 · 编辑 HTML 与选择器实时高亮命中 · 全程浏览器本地处理
第一节
关于本工具
About调试一个 CSS 选择器，往往要在开发者工具和页面之间来回切换，效率极低。这个工具让用户直接输入选择器，在当前页面实时高亮命中的 DOM 元素，并显示匹配数量与具体路径。前端开发者排查样式覆盖、编写自动化测试脚本时，用它验证选择器准确性，比逐层审查 HTML 快得多。所有解析与高亮都在浏览器本地完成，不向任何服务器发送页面内容。
使用场景
爬虫字段定位调试
爬取电商商品列表时，需要从 `<div class="price-box">` 中提取折扣价，但同一页面存在 `price-box discount` 和 `price-box original` 两种类名。用 `div.price-box.discount span.amount` 作为选择器，在工具中粘贴目标页面的 HTML 片段，立刻看到该选择器命中了 3 个元素，其中 2 个是预期折扣价，1 个误中了促销标签内的价格。调整选择器为 `div.price-box.discount > span.amount` 后重新测试，确认只命中目标字段，避免爬取数据污染。
CMS 模板选择器校验
在织梦 CMS 中编写自定义列表模板，需要确保 `{dede:arclist typeid='5'}` 生成的 `<li>` 能被 `ul.list-news li:not(.ad)` 正确选中，以排除广告位。在工具中粘贴模板渲染后的 HTML 片段，输入选择器 `ul.list-news li:not(.ad)`，发现预期命中 8 条新闻，实际只命中 7 条——第 3 条新闻的 `<li>` 缺少 `class="ad"` 但被 `<div class="ad-banner">` 包裹，导致 `:not(.ad)` 误判。修改选择器为 `ul.list-news li:not(:has(div.ad-banner))` 后重新验证，命中数恢复为 8 条。
无障碍焦点顺序验证
为政府网站添加 `tabindex` 属性后，需要确认 `a.nav-link[tabindex="0"]` 是否覆盖了所有可聚焦的导航链接。在工具中粘贴包含完整导航栏的 HTML 片段，输入选择器 `a.nav-link[tabindex="0"]`，结果高亮显示 12 个元素，但手动数出导航栏共有 14 个 `<a>` 标签——发现两个“更多”按钮的 `<a>` 标签没有 `tabindex` 属性，导致键盘用户无法通过 Tab 键访问。补上属性后再次用工具验证，确认全部命中。
第三方组件样式覆盖
在 Vue 项目中引入 Element Plus 的日期选择器，发现其弹出面板的 `.el-date-picker__header` 背景色与设计稿不符。需要写一个高优先级选择器覆盖默认样式，但直接写 `.el-date-picker__header` 会被组件内部的内联样式覆盖。在工具中粘贴组件渲染后的 DOM 片段，测试选择器 `.el-date-picker__popper .el-date-picker__header`，确认它精确命中目标元素且没有意外匹配到其他 `.el-date-picker__header`（如月份选择器的 header），然后才在 CSS 中追加 `!important` 或 `:deep()` 写法。
第二节
使用指南
Getting Started使用步骤
- 1在左侧输入框粘贴或键入 CSS 选择器（如 .class、#id、div > p），右侧预览区立即高亮匹配的 DOM 元素
- 2点击预览区任一高亮元素，下方「命中详情」面板显示该元素的标签名、类名、ID 及父级路径
- 3修改选择器后，预览区自动清除旧高亮并重新标记新匹配元素，无需手动刷新
- 4勾选「忽略大小写」或「仅匹配可见元素」开关，预览区高亮范围同步过滤
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| div | 命中 3 个元素：<div class="container">、<div id="main">、<div class="footer"> | 常规：标签选择器是最基础用法，验证工具能正确匹配页面中所有同名标签。 |
| .highlight | 命中 2 个元素：<p class="highlight">、<span class="highlight"> | 常规：类选择器，验证工具能识别 class 属性并返回多个匹配结果。 |
| #header | 命中 1 个元素：<header id="header"> | 常规：ID 选择器，验证工具能精确匹配唯一 ID，输出单个元素。 |
| div > p | 命中 2 个元素：<p>（在 <div class="content"> 内）、<p>（在 <div id="sidebar"> 内） | 边界：子代组合器，验证工具能区分直接子元素与嵌套后代，不匹配非直系 p。 |
| input[type="text"] | 命中 1 个元素：<input type="text" name="username"> | 边界：属性选择器，验证工具能处理带引号的属性值，且区分不同 type 值。 |
| :nth-child(2n) | 命中 4 个元素：<li>（第 2、4、6、8 个 <li>） | 易错：伪类选择器，用户常混淆 :nth-child 与 :nth-of-type，此处验证工具按父元素内所有子元素计数。 |
| div:not(.container) | 命中 2 个元素：<div id="main">、<div class="footer"> | 易错：否定伪类，验证工具能正确排除匹配 .container 的 div，不误伤其他元素。 |
常见错误对照
1.类选择器漏掉点号，当成元素选择器
✗ 错误
container✓ 修复
.containerCSS 类选择器必须以 . 开头，不加点号会被解释为 <container> 元素选择器，导致匹配不到任何元素。
2.ID 选择器漏掉井号，当成元素选择器
✗ 错误
main✓ 修复
#mainID 选择器必须以 # 开头，不加井号会变成元素选择器 <main>，与预期完全不符。
3.属性选择器值漏引号，语法错误
✗ 错误
[data-type=primary]✓ 修复
[data-type="primary"]虽然部分浏览器容忍无引号，但规范要求属性值必须用引号包裹，否则遇到特殊字符（空格、点号）会直接解析失败。
4.子代选择器空格位置错误，变成后代选择
✗ 错误
ul > li.active✓ 修复
ul > .active> 两侧空格可选，但 li.active 是选中 li 且带 active 类，若想选中 ul 下所有带 active 类的元素，应写 ul > .active。
5.伪类 :nth-child 参数未从 1 开始计数
✗ 错误
:nth-child(0)✓ 修复
:nth-child(1)CSS 的 :nth-child 索引从 1 开始，0 匹配不到任何元素。常见误区是受编程数组从 0 索引影响。
6.后代选择器用逗号代替空格，变成分组选择
✗ 错误
div, p✓ 修复
div p逗号是分组选择器，选中所有 <div> 和所有 <p>；空格才是后代选择器，选中 <div> 内的 <p>。两者语义完全不同。
7.属性值大小写不匹配，导致选择器失效
✗ 错误
[type="SUBMIT"]✓ 修复
[type="submit"]HTML 属性值默认大小写敏感（除 class/id 等少数例外），input type 值必须小写，否则选择器匹配不到。
8.伪元素用单冒号，旧写法兼容性差
✗ 错误
div:before✓ 修复
div::beforeCSS3 规范规定伪元素用双冒号 ::，单冒号 : 是旧版写法，虽然浏览器兼容但不符合现代标准，建议统一用双冒号。
第三节
工作原理
How It Works核心公式
matches = { element ∈ DOM | element.querySelectorAll(selector) ≠ ∅ }
变量说明
selectorCSS 选择器字符串，如 .classDOM当前页面的文档对象模型树matches被选择器命中的元素集合
示例
页面 DOM 含 <div class="box"> 和 <p id="text">，输入 selector = ".box"，调用 document.querySelectorAll(".box") 返回包含 <div class="box"> 的 NodeList，matches 长度为 1，该元素高亮。
用户输入 / 输出
本地处理
判断逻辑
第五节
常见问题
Q & A问我写了一个很长的 CSS 选择器，为什么预览出来什么都没命中？＋
答
最常见的原因：选择器写错了。检查是否有拼写错误、多余空格或遗漏的引号。另外，选择器中的伪类（如 :nth-child()）或属性选择器（如 [data-type='value']）里的值大小写、引号类型是否和 HTML 一致？本工具实时解析你输入的 CSS 选择器，如果语法有误，结果区会直接显示红色错误提示。建议从最简单的单个类选择器（如 .class）开始测试，逐步叠加，定位问题在哪一级。
问这个工具支持 :hover 或 :focus 这种动态伪类吗？＋
答
不支持。本工具一次只解析你输入的静态选择器字符串，不会模拟鼠标悬停或键盘焦点状态。:hover、:focus、:active 这类伪类需要浏览器实际交互才能触发，纯解析器无法判断元素在交互后是否被选中。如果测试动态效果，请直接在浏览器开发者工具（F12）的 Elements 面板里勾选 :hover 状态来验证。
问为什么我写的 #id 选择器在工具里能命中，但放到页面上却无效？＋
答
工具只验证选择器能否匹配当前页面 DOM 结构，不保证该选择器在页面其他脚本或样式中的优先级。如果 HTML 中有多个相同 id（虽然不合法但有时出现），#id 选择器只会匹配第一个。此外，如果 id 包含特殊字符（如点、冒号、空格），需要转义（例如 #my\.id 或 [id='my.id']），工具能解析转义格式，但直接写 #my.id 会被视为 class 选择器。
问这个测试工具是纯前端运行的吗？会不会把我的页面源码传到服务器？＋
答
完全不会。本工具 100% 在浏览器本地运行，你粘贴的 HTML 和 CSS 选择器只存在于当前标签页的内存中，不会被发送到任何服务器。即使断网也能正常使用。你可以放心粘贴包含敏感信息（如内网页面片段）的 HTML 进行测试。
问我粘贴了整页 HTML 进去，但工具只高亮了几个元素，是不是没解析全？＋
答
工具会解析你粘贴的全部 HTML，但只高亮符合选择器的元素。如果你粘贴的是完整页面（含 <html>、<head>、<body> 等），工具会将其作为整体 DOM 树解析。检查一下：选择器是否写对了？是否匹配了 <head> 里的 <style> 或 <script> 元素？这些标签默认不可见，但选择器依然能命中。建议先粘贴一段简化后的 HTML 片段来验证选择器逻辑。
问这个工具和浏览器开发者工具（F12）的 CSS 选择器测试有什么区别？＋
答
核心区别：本工具不需要打开浏览器 DevTools，也不需要真实加载目标页面。你只需粘贴 HTML 片段，就能快速验证选择器是否写对。浏览器 DevTools 的 $() 命令需要页面已加载且 DOM 完整，适合调试线上页面；本工具适合在开发阶段、写代码时快速测试选择器语法和匹配逻辑。另外，本工具会同时显示匹配元素的数量和具体路径，比 DevTools 的 $0 更直观。
问我输入了多个选择器（逗号分隔），为什么只高亮了一部分？＋
答
逗号分隔的选择器列表（如 .a, .b, #c）会被视为多个独立选择器，工具会分别匹配并合并结果。如果只高亮了一部分，说明未高亮的选择器没有匹配到任何元素。检查每个子选择器的语法是否正确，以及对应的元素是否存在于你粘贴的 HTML 中。建议用工具提供的「匹配计数」功能：它会分别显示每个选择器命中的元素数量，定位是哪个子选择器出了问题。
问为什么用 :not(.a) 选择器，结果高亮了所有元素，包括 <html> 和 <head>？＋
答
:not(.a) 会匹配所有不包含 class='a' 的元素。你粘贴的 HTML 片段中，<html>、<head>、<meta> 等标签默认没有 class='a'，因此被全部命中。这是符合 CSS 规范的。实际使用时，通常需要结合其他选择器限定范围，例如 div:not(.a) 只匹配 <div> 元素中不含 class='a' 的。如果不想匹配根元素或文档标签，建议使用更具体的选择器前缀（如 body :not(.a)）。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。