文本提取 · 本地处理 · 可直接复制

CSS选择器参考大全

按类型检索 CSS 基础、组合、属性、伪类和伪元素选择器，查看示例并复制可用代码片段。

开始使用返回AI工具

从长文本快速提取

CSS选择器参考大全适合把混杂文本里的目标内容快速抽出来，省去手工逐段筛选。

支持本地先清洗

结果先在浏览器里生成，适合提取名单、字段、链接或其他可复用文本。

复制后继续处理

提取结果可以继续导入表格、脚本、接口参数或其他内部流程。

CSS 本地参考

CSS 选择器检索与示例复制

按基础、组合、属性、伪类、伪元素等类型快速筛选 CSS 选择器。查询关键词只在浏览器本地过滤，不会上传服务器。

搜索选择器、说明或示例类型

当前命中

分类数

本地处理

不上传

基础

* 通配选择器

匹配页面内所有元素，常用于统一盒模型。

* { box-sizing: border-box; }

基础

p 元素选择器

按 HTML 标签匹配元素。

p { line-height: 1.8; }

基础

.card 类选择器

匹配 class 包含 card 的元素，是最常用的样式入口。

.card { padding: 16px; }

基础

#main ID 选择器

匹配指定 id，权重较高，建议谨慎使用。

#main { max-width: 960px; }

组合

.card .title 后代选择器

匹配 .card 内任意层级的 .title。

.card .title { font-weight: 700; }

组合

.card > .title 子元素选择器

只匹配直接子元素。

.card > .title { margin: 0; }

组合

h2 + p 相邻兄弟选择器

匹配紧跟在 h2 后面的第一个 p。

h2 + p { margin-top: 8px; }

组合

h2 ~ p 通用兄弟选择器

匹配同级且出现在 h2 后面的所有 p。

h2 ~ p { color: #475569; }

属性

[disabled] 存在属性

匹配带有 disabled 属性的元素。

[disabled] { cursor: not-allowed; }

属性

[type="email"] 属性等于

匹配属性值完全相等的元素。

input[type="email"] { border-color: #0ea5e9; }

属性

[href^="https"] 属性开头匹配

匹配 href 以 https 开头的链接。

a[href^="https"] { color: #2563eb; }

属性

[src$=".webp"] 属性结尾匹配

匹配属性值以指定字符串结尾。

img[src$=".webp"] { border-radius: 12px; }

属性

[class*="btn"] 属性包含

匹配属性值中包含指定片段。

[class*="btn"] { font-weight: 600; }

伪类

:hover 悬停状态

鼠标悬停时生效。

.button:hover { transform: translateY(-1px); }

伪类

:focus-visible 键盘焦点

更适合键盘可访问性的焦点样式。

.field:focus-visible { outline: 2px solid #2563eb; }

伪类

:first-child 第一个子元素

匹配父元素里的第一个子元素。

.item:first-child { border-top: 0; }

伪类

:last-child 最后一个子元素

匹配父元素里的最后一个子元素。

.item:last-child { border-bottom: 0; }

伪类

:nth-child(2n) 按序号匹配

常用于隔行样式。

.row:nth-child(2n) { background: #f8fafc; }

伪类

:not(.active) 排除匹配

排除指定选择器。

.tab:not(.active) { opacity: .65; }

伪类

:has(img) 包含匹配

匹配内部包含指定元素的父元素。

.card:has(img) { padding-top: 0; }

伪元素

::before 前置伪元素

常用于装饰点、图标和前缀。

.badge::before { content: ""; }

伪元素

::after 后置伪元素

常用于尾部装饰和提示。

.link::after { content: "→"; }

伪元素

::first-letter 首字母

匹配文本首字母。

p::first-letter { font-size: 2rem; }

伪元素

::selection 选中文本

控制用户选中文字后的高亮样式。

::selection { background: #fde68a; }

表单

:checked 已选中

匹配 checkbox、radio 的选中状态。

input:checked + label { color: #2563eb; }

表单

:disabled 禁用状态

匹配禁用控件。

button:disabled { opacity: .5; }

表单

:required 必填项

匹配必填表单项。

input:required { border-left: 3px solid #f97316; }

结构

:root 根元素

常用于定义 CSS 变量。

:root { --brand: #2563eb; }

结构

:empty 空元素

匹配没有子节点的元素。

.message:empty { display: none; }

结构

:is(h1, h2, h3) 选择器分组

降低重复书写，分组匹配多个选择器。

:is(h1, h2, h3) { letter-spacing: -.02em; }

结构

:where(article, section) 低权重分组

和 :is 类似，但自身权重为 0。

:where(article, section) p { margin: 0; }

选择器检索和复制都在浏览器本地完成，不会上传服务器。

工具使用说明

怎么用 CSS选择器参考大全

粘贴原始文本

把合同、工单、日志、聊天记录或网页片段粘贴到输入框里。

执行提取规则

页面会按当前模板规则提取目标内容，后续可以继续补强提取逻辑。

复制提取结果

提取结果适合继续做筛选、去重、导表或脚本二次处理。

功能说明

这个工具解决什么问题