CSS 选择器测试器

在线 CSS 选择器测试工具,输入选择器与 HTML 代码即可实时高亮匹配的元素并显示命中数量,帮助调试与学习 CSS 选择器语法;浏览器本地运行,免费无需安装。

示例选择器:
匹配结果 0 个匹配

CSS 选择器参考

element 元素选择器
.class 类选择器
#id ID选择器
* 通配选择器
A B 后代选择器
A > B 子选择器
A + B 相邻兄弟
A ~ B 通用兄弟
[attr] 属性存在
[attr=val] 属性等于
[attr^=val] 属性开头
[attr$=val] 属性结尾
[attr*=val] 属性包含
:first-child 第一个子元素
:last-child 最后子元素
:nth-child(n) 第n个子元素
:not(sel) 否定选择器
:hover 鼠标悬停

CSS 选择器测试器常见问题

CSS 选择器测试器怎么使用?

先填写或调整「HTML 代码」;修改输入或使用页面控件后查看结果区域。

怎样定位需要查看的结果或说明?

本页按「CSS 选择器参考」等区域组织内容。先完成当前操作,再检查对应区域及页面提示;未满足输入条件时,应先补齐数据,不要将占位值当作已完成的结果。

CSS 选择器测试器的结果应怎样理解?

先用最小示例验证,再将结果放回实际开发环境检查。语言版本、运行环境、编码和配置项可能与浏览器中的处理规则不同。

输入内容会保存或发给外部服务吗?

本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接,以及带外部地址的内容预览仍可能产生网络请求;“本地处理”并不表示整个网页完全没有网络活动。

没有结果或操作失败时先检查什么?

先检查「HTML 代码」是否完整,以及格式、单位和当前选项是否匹配。修改输入后,查看页面的结果或错误提示;可先用少量数据定位问题。

相关工具

CSS 格式化 · Box Shadow 生成器 · CSS 动画生成器 · Css Animation · 全部开发工具