无需登录 数据私有 本地保存

CSS选择器测试器 - 验证表达式是否匹配

14
0
0
0

CSS 选择器测试器

实时验证选择器表达式，高亮匹配元素
0 个匹配
快速预设： .card #main-content [data-status="active"] ul.list > li li:first-child article p .card, .panel [class*="btn"]
HTML 代码
实时预览 已高亮 0 个元素
匹配元素详情
# 标签 ID 类名 文本内容
暂无匹配结果 — 请在上方输入选择器和HTML代码

CSS 选择器常见问题

CSS 选择器主要分为：基础选择器（元素选择器如 div、类选择器 .class、ID选择器 #id、通配符 *）、属性选择器（如 [attr]、[attr="value"]、[attr^="prefix"]、[attr$="suffix"]、[attr*="contains"]）、组合选择器（后代 A B、子代 A > B、相邻兄弟 A + B、通用兄弟 A ~ B）、伪类（如 :hover、:first-child、:nth-child(n)、:not()）和伪元素（如 ::before、::after）。

选择器优先级按 a-b-c 三级计算：a = ID选择器数量（#id），b = 类选择器、属性选择器、伪类数量（.class、[attr]、:hover），c = 元素选择器、伪元素数量（div、::before）。比较时从a开始，数值大的优先级高。!important 会覆盖所有规则，但应谨慎使用。例如 #nav .item a:hover 的权重为 1-2-1。

伪类（单冒号 :）用于匹配元素的状态或结构位置，如 :hover（悬停状态）、:first-child（第一个子元素）、:nth-child(2n)（偶数子元素）、:not(.exclude)（排除匹配）。伪元素（双冒号 ::）用于创建或选中元素的虚拟子部分，如 ::before（元素前插入内容）、::after（元素后插入内容）、::placeholder（输入框占位文本）、::selection（用户选中的文本）。注意 querySelectorAll 不支持伪元素匹配。

常见原因包括：1) 伪元素选择器（::before、::after）不被 querySelectorAll 支持；2) 选择器语法错误（如括号不匹配、引号未闭合）；3) 使用了仅在特定上下文有效的伪类（如 :link、:visited 需要链接元素）；4) 动态伪类（:hover、:focus）在静态查询中会匹配所有符合前置条件的元素，而非仅当前悬停/聚焦的元素。使用本工具可以实时验证选择器是否有效。

属性选择器非常灵活：[attr] 匹配具有该属性的元素；[attr="val"] 精确匹配；[attr~="val"] 匹配包含独立单词（空格分隔）；[attr|="val"] 匹配以 val- 开头的值；[attr^="val"] 匹配以val开头；[attr$="val"] 匹配以val结尾；[attr*="val"] 匹配包含val子串；[attr="val" i] 不区分大小写匹配（CSS4，部分浏览器支持）。多个属性选择器可组合：[type="text"][required]。
🔧 相关工具