分类

← View All Tools

CSS选择器提取器

从CSS内容中提取和分类所有CSS选择器

CSS选择器提取器

此工具帮助您分析和提取样式表中的CSS选择器：

支持的选择器类型：

类选择器：.class-name, .multiple.classes
ID选择器：#id-name
元素选择器：div, span, button
属性选择器：[type="text"], [data-*]
伪类：:hover, :nth-child(2), :not(.class)
伪元素：::before, ::after, ::first-line
组合器：后代(>)、相邻(+)、一般兄弟(~)

功能特性：

忽略CSS注释
跟踪行号
处理嵌套选择器（SCSS/LESS）
支持@media查询和@keyframes
去除重复结果
计算CSS特异性

关键信息

分类: Development
输入类型: textarea, checkbox
输出类型: json
样本覆盖: 4
支持 API: Yes

概览

### CSS选择器提取器此工具帮助您分析和提取样式表中的CSS选择器： **支持的选择器类型：** - **类选择器**：.class-name, .multiple.classes - **ID选择器**：#id-name - **元素选择器**：div, span, button - **属性选择器**：[type="text"], [data-*] - **伪类**：:hover, :nth-child(2), :not(.class) - **伪元素**：::before, ::after, ::first-line - **组合器**：后代(>)、相邻(+)、一般兄弟(~) **功能特性：** - 忽略CSS注释 - 跟踪行号 - 处理嵌套选择器（SCSS/LESS） - 支持@media查询和@keyframes - 去除重复结果 - 计算CSS特异性

适用场景

•当你需要在浏览器中快速 analyze video 内容时，可以使用它。
•适合需要可重复输入和快速结果的 development 工作流。
•如果你想先验证输入输出行为，再集成到其他流程中，这个工具很适合。

工作原理

•先输入 CSS内容, 包含媒体查询, 包含关键帧, 去重结果。
•工具会处理请求并返回 json 类型的结果。
•在交互式验证结果后，可以继续使用页面提供的 API 端点进行批量或自动化调用。

使用场景

在调试或 QA 场景下处理 video 数据。

在接入 API 或自动化流程前先验证输出结果。

快速比较小幅输入变化对输出结果的影响。

用 Samples 测试

video

CSS选择器示例

用于提取和分析测试的CSS选择器示例集合

title token css,selector

sample

Markdown 链接提取示例

包含各种链接类型的 Markdown 示例文档，用于测试 Markdown 链接提取工具

title token extractor

sample

手机号提取器示例

包含来自多个国家的电话号码的混合文本集合，用于提取测试

title token extractor

sample

变更日志提取器样本

用于测试变更日志解析和提取工具的各种变更日志格式

title token extractor

sample

常见问题

CSS选择器提取器是做什么的？

CSS选择器提取器可帮助你在线 analyze video 内容，无需单独编写本地脚本或应用。

什么时候适合用这个工具？

当你需要快速完成 analyze 流程、验证输出结果，或需要一个浏览器内的 development 工具时，就适合使用它。

可以用样本数据测试这个工具吗？

可以。建议先用简短、具有代表性的输入测试，再逐步增加复杂度。

CSS选择器提取器支持哪些输入？

CSS选择器提取器支持 CSS内容, 包含媒体查询, 包含关键帧, 去重结果.

CSS选择器提取器有 API 吗？

有。工具页包含可供脚本调用的 API 端点，方便你从手动测试过渡到自动化使用。

API 文档

请求端点

POST /zh/api/tools/css-selector-extractor

请求参数

参数名	类型	必填	描述
cssContent	textarea	是	-
includeMediaQueries	checkbox	否	Include selectors inside @media queries
includeKeyframes	checkbox	否	Include selectors inside @keyframes
deduplicate	checkbox	否	Remove duplicate selectors from results
calculateSpecificity	checkbox	否	Calculate CSS specificity for each selector

响应格式

{
  "key": {...},
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}

JSON数据: JSON数据

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中：

{
  "mcpServers": {
    "elysiatools-css-selector-extractor": {
      "name": "css-selector-extractor",
      "description": "从CSS内容中提取和分类所有CSS选择器",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=css-selector-extractor",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]

分类

CSS选择器提取器