分类

← 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特异性

Include selectors inside @media queries

Include selectors inside @keyframes

Remove duplicate selectors from results

Calculate CSS specificity for each selector

关键信息

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

概览

CSS选择器提取器是一款专为开发者设计的实用工具，能够从CSS代码中快速、准确地提取并分类所有选择器。它支持类、ID、元素、属性、伪类、伪元素及组合器等多种类型，并能处理嵌套规则、媒体查询和关键帧动画，帮助您高效分析和管理样式表。

适用场景

  • •需要审查或分析大型CSS/SCSS/LESS文件，了解其中使用了哪些选择器时。
  • •在重构或优化样式表前，希望快速识别所有类名、ID或特定类型选择器时。
  • •需要为CSS代码生成选择器清单或文档，以便团队协作或知识传承时。

工作原理

  • •在输入框中粘贴或输入您的CSS代码内容。
  • •根据需要勾选配置选项，例如是否包含媒体查询内的选择器、是否去除重复结果、是否计算特异性等。
  • •点击提取按钮，工具将解析代码并输出结构化的选择器列表，包含类型、名称、所在行号及特异性（如已启用）等信息。

使用场景

代码审查与重构：在接手旧项目或进行大规模样式重构前，快速摸清现有选择器的使用情况和复杂度。
生成技术文档：自动为项目样式表生成一份清晰的选择器清单，作为开发文档的一部分。
性能分析与优化：通过查看选择器列表和特异性，识别过于复杂或可能影响渲染性能的选择器规则。

用户案例

1. 快速审查第三方库的CSS

前端开发者
背景原因
开发者小王需要在一个新项目中引入一个UI组件库，但想先了解其CSS的结构和命名约定，避免与现有样式冲突。
解决问题
组件库的CSS文件很大，手动查找和记录所有类名和ID非常耗时。
如何使用
将组件库的CSS文件内容粘贴到工具输入框，勾选“去重结果”和“计算特异性”，然后点击提取。
效果
获得一份去重后的选择器列表，清晰展示了所有可用的类名、ID及其特异性，帮助小王快速评估集成风险和制定覆盖策略。

2. 为团队样式指南生成选择器索引

技术负责人
背景原因
团队的样式指南文档需要附带一个当前项目使用的所有CSS选择器索引，以便新成员查阅。
解决问题
手动从多个CSS文件中整理选择器索引容易遗漏且难以维护。
如何使用
依次将项目的主要CSS文件内容输入工具，启用所有选项（包含媒体查询、关键帧，去重并计算特异性），提取结果。
效果
生成了一份完整、结构化的选择器报告，可直接复制到团队Wiki或文档中，作为样式指南的动态参考附录。

用 Samples 测试

video
CSS选择器示例
用于提取和分析测试的CSS选择器示例集合
title token css,selector
sample
Markdown 链接提取示例
包含各种链接类型的 Markdown 示例文档，用于测试 Markdown 链接提取工具
title token extractor
sample
手机号提取器示例
包含来自多个国家的电话号码的混合文本集合，用于提取测试
title token extractor
sample
变更日志提取器样本
用于测试变更日志解析和提取工具的各种变更日志格式
title token extractor
sample

相关专题

VideoConvert工具专题
探索 36 个围绕 video 的 convert 工作流工具，快速找到相近能力。
Video 工具专题
探索 16 个围绕 video 的 utility 工作流工具，快速找到相近能力。
JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
ImageConvert工具专题
探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。

常见问题

这个工具支持哪些CSS选择器类型？

支持类选择器（.class）、ID选择器（#id）、元素选择器（div）、属性选择器（[type="text"]）、伪类（:hover）、伪元素（::before）以及后代（>）、相邻（+）等组合器。

它能处理SCSS或LESS等预处理器的嵌套语法吗？

可以。工具能够解析并提取嵌套在SCSS或LESS规则中的选择器。

“计算特异性”功能有什么用？

启用后，工具会为每个提取的选择器计算其CSS特异性值（如 0,1,0），这有助于理解样式规则的优先级和潜在的覆盖问题。

提取结果中的“行号”准确吗？

是的，工具会跟踪并显示每个选择器在原始CSS代码中首次出现的行号，便于您快速定位。

工具会忽略CSS注释吗？

是的，工具在解析时会自动忽略 /* */ 风格的CSS注释，确保提取结果只包含有效的选择器。

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]