CSS 选择器测试

怎么用

1. 把 HTML 片段粘贴进第一个输入框。不需要完整文档，几个嵌套标签就够。
2. 输入CSS 选择器，例如 .card > p、ul li:nth-child(2) 或 a[href]。
3. 点测试选择器。每个匹配元素都会列出序号、标签名、id、类名，以及前 40 个字符的文本预览。
4. 如果选择器无法解析，会显示浏览器给出的原始报错，而不是一个空结果 —— 打错字不会被误认为「零匹配」。

片段在一个游离容器里解析，这个容器永不挂到页面上。script 元素与内联事件属性会被移除，src、href 这类会加载资源的属性会被置空，因此既不执行脚本，也不发起请求。有内容被剔除时，工具会明确告诉你剔除了多少。

常见用法

• 写抓取脚本前先验证选择器 —— 确认命中的正是你想要的节点，再放进代码。
• 排查样式不生效 —— 判断选择器是范围过大、过小，还是根本写错了。
• 学习选择器语义 —— 拿自己控制的标签试 nth-child、属性选择器与组合器。
• 核对邮件或 CMS 里的片段 —— 粘进来看看一条规则会命中多少元素。

常见问题

问：数据会上传吗？ 答：不会。全部过程都在浏览器内存里完成，内部模板与页面片段不会离开你的设备。

问：为什么 img[src="photo.png"] 匹配不到了？ 答：为了不让浏览器发起任何请求，资源类属性的值被置空了。属性本身保留，所以 img[src] 仍然命中，但按确切地址比较的选择器不会命中。

问：片段里的脚本会执行吗？ 答：不会。解析前会移除 script、iframe、object、embed 元素，并剔除内联事件属性；容器也从不挂到文档上。

问：支持完整的选择器语法吗？ 答：取决于你的浏览器。工具调用的正是页面代码里那个 querySelectorAll，结果与浏览器运行时的行为一致。