工具用的顺手吗？
你的反馈能帮助我们做得更好
验证CSS选择器在HTML中的匹配效果，快速定位元素
*通配选择器，匹配页面中的所有元素。
* { margin: 0; }#idID 选择器，匹配指定 id 的唯一元素。
#header { color: #111; }.class类选择器，匹配包含指定 class 的元素。
.btn { border-radius: 8px; }A B后代选择器，匹配 A 内部任意层级的 B。
nav a { text-decoration: none; }A > B子代选择器，仅匹配 A 的直接子元素 B。
ul > li { list-style: none; }A + B相邻兄弟选择器，匹配紧跟在 A 后面的第一个 B。
h2 + p { margin-top: 0; }A ~ B通用兄弟选择器，匹配 A 后面所有同级 B。
h2 ~ p { color: #666; }[attr]属性存在选择器，匹配包含指定属性的元素。
input[required] { border-color: red; }[attr=value]属性值选择器，匹配属性值等于指定内容的元素。
a[target='_blank'] { color: #2563eb; }:hover鼠标悬停伪类，匹配悬停状态元素。
button:hover { opacity: .9; }:focus焦点伪类，匹配当前获得焦点的元素。
input:focus { outline: 2px solid #3b82f6; }:nth-child(n)结构伪类，按子元素序号匹配元素。
li:nth-child(2n) { background: #f8fafc; }::before伪元素，在元素内容前插入可样式化内容。
.tag::before { content: '#'; }::after伪元素，在元素内容后插入可样式化内容。
.tag::after { content: '✓'; }概览
了解工具能解决的问题、计算或处理逻辑，以及数据边界。
CSS 选择器是描述“哪些元素符合条件”的模式，例如 .card 匹配带有 card 类的元素，#main 按 id 定位元素。本页列出常见选择器、简短说明和 CSS 示例；输入关键词后可筛选条目并复制选择器文本，便于放入自己的样式表或代码编辑器。
目录包含通用选择器 *、类型/类/ID 选择器、属性选择器、后代与兄弟组合器，以及 :hover、:focus、:nth-child()、::before 与 ::after 等示例。CSS 规范会演进，浏览器实现也可能因语法特性和版本而不同；列出某条表达式不代表所有浏览器都支持它。
空格表示后代关系，例如 nav a 表示 nav 内任意层级的链接；> 表示直接子元素，例如 ul > li；+ 表示紧邻的下一个兄弟元素，~ 表示后续兄弟元素。组合器连接左右两侧条件，按照文档结构缩小匹配范围。
伪类描述元素状态或结构位置，如悬停、获得焦点或位于第几个子项；伪元素表示元素的一部分或由样式生成的内容。把这些概念分开，有助于读懂已有规则。
指南
按步骤完成操作，并通过示例核对输入与结果。
可输入 class、属性、hover 或 nth-child。筛选会匹配表达式、中文说明和示例代码；清空关键词可恢复全部目录。
观察点号、井号、方括号、冒号或组合器，再阅读示例。例如查询 A > B，示例展示父元素与直接子元素的关系。
点击条目旁的复制按钮取得选择器，放入自己的样式规则中测试。若要检查具体 HTML 实际命中了哪些节点，需要在真实文档或开发环境验证；本页面没有 HTML 输入区，也不会执行 DOM 匹配。
场景
查看这项工具在不同工作与生活流程中的用法。
遇到复杂规则时，先查找其中的属性条件、伪类和关系组合器，再将示例与页面结构对照。把表达式拆小逐步测试，方便找出限制范围的条件。
从类型、类和 ID 开始，再查属性与伪类。每次只变更一个符号，观察目标范围怎样变化，适合配合简单 HTML 示例练习。
问答
集中解答高频疑问与容易混淆的问题。
本页不是 HTML 选择器执行器，没有粘贴 DOM 并返回节点的功能；它只筛选预置的选择器说明和代码例子。
筛选对象是目录条目的表达式、说明和示例，并不是 CSS 语法解析器。可输入表达式的一部分、伪类英文名或说明中的中文词；不在目录中的语法不会自动生成新条目。
不能这样推断。较新的伪类或伪元素要结合目标浏览器的支持情况，在实际项目中测试。
须知
使用前了解适用范围、结果限制与必要提醒。
选择器规范描述语法和匹配模型，具体页面能否使用某一项还取决于浏览器支持、文档结构及使用上下文。速查示例不会替项目运行语法检查、显示命中节点或判断样式优先级。遇到较新功能时，应查看目标浏览器支持信息并在项目中验证。
推荐
查找相关工具、专题与可用的 API 能力。