CSS 选择器测试器
针对粘贴的 HTML 测试 CSS 选择器，查看每个匹配元素的标记和文本。使用 querySelectorAll，因此结果与浏览器完全一致。
HTML 通过 DOMParser 解析，并用 querySelectorAll 查询，与浏览器中的行为完全一致（CSS Selectors Level 4 的支持程度取决于浏览器）。粘贴的 HTML 中的脚本不会被执行。
什么是 CSS 选择器测试器？
CSS 选择器测试器会对你粘贴的 HTML 运行选择器，并列出每个匹配元素的 outer HTML 和文本内容。凡是你的浏览器支持的都能用，从属性选择器到 :not()、:is()、:has() 和 :nth-child()。
如何使用 CSS 选择器测试器
- 输入 CSS 选择器，例如
nav li:not(.active) > a[href^="/"]。 - 粘贴或编辑 HTML。
- 查看匹配数量以及每个匹配的高亮标记。
- 用“复制”按钮复制所有匹配的 HTML。
示例
输入
nav li:not(.active) > a[href^="/"] on the sample HTML
输出
1 match: <a href="/blog" data-track="nav">Blog</a>
a[href] 会匹配示例中的全部 4 个链接。
何时使用 CSS 选择器测试器
适合为 CSS 规则、自动化测试（Playwright、Cypress）、网页抓取或 document.querySelector 调用编写选择器。它不会应用样式，也不计算优先级，而且 :hover 等动态伪类在静态文档中永远不会匹配。
CSS 选择器测试器 的工作原理
HTML 通过 DOMParser 解析为一个分离的文档（脚本不会被执行），选择器则传给 querySelectorAll()。因此匹配结果与你的浏览器完全一致，包括它对较新的 Selectors Level 4 特性的支持程度。无效的选择器会被捕获并报告。最多显示 200 个匹配。
常见用例
- 检查 Playwright 定位器是否恰好只匹配一个按钮。
- 为商品价格构建爬虫选择器。
- 学习组合器（>、+、~）和 :not() 的行为。
- 测试你的浏览器是否支持 :has()。
常见问题
为什么我的选择器在抓取的页面中什么也匹配不到？
页面可能是用 JavaScript 生成的 HTML。请粘贴 DevTools 中渲染后的 HTML（Copy outerHTML），而不是原始源码。
支持 :has() 吗？
支持，当前的 Chrome、Edge、Safari 和 Firefox 都支持。测试器使用的是你的浏览器，所以旧版浏览器会报告它无效。
它会显示优先级吗？
不会，它只显示哪些元素匹配。
推荐的下一步
代码压缩
在一个工具里压缩 JavaScript（Terser）、CSS（CSSO）、HTML、JSON 或 XML：选择语言、粘贴代码，即可看到节省的字节数。免费，在浏览器中运行。
代码美化
在浏览器中一站式美化 14 种语言的代码，涵盖前端脚本、样式表、标记语言、数据格式、查询语言以及 PHP 和 Python，选择语言和缩进即可。
CSS 盒阴影生成器
可视化构建 CSS box-shadow：叠加多层阴影，设置偏移、模糊、扩展、内阴影和 RGBA 不透明度，实时预览并复制简洁的代码。
CSS 渐变生成器
设计线性、径向和锥形 CSS 渐变，支持可拖动色标、角度、重复模式和 OKLCH 插值。实时预览并复制代码。
CSS Flexbox 生成器
可视化设置弹性容器的方向、换行、主轴与交叉轴对齐、间距，以及每个项目的伸缩、顺序和自身对齐，实时显示子项并可复制 CSS。
CSS Grid 生成器
可视化构建 CSS Grid 布局：grid-template-columns/rows、带校验的命名区域、间距、对齐和每个项目的定位，复制简洁的 CSS。