# CSS 选择器特异性计算器

计算 CSS 选择器特异性分数，比较多个选择器优先级，并给出避免冲突的建议

> 标准页面: https://elysiatools.com/zh/tools/css-selector-specificity-calculator

- **分类:** Development

- **关键词:** css, specificity, selector

## 概述

输入一个或多个 CSS 选择器后，工具会分解并计算 (a, b, c) 特异性，展示优先级强弱，并针对高特异性选择器给出减少冲突的建议。

## 输入项

- **选择器** (textarea): .card .title #app .sidebar a:hover button.primary:is(:hover,:focus)

## 适用场景

- 调试复杂的 CSS 样式覆盖问题，确定为何某个样式未生效时。
- 在重构大型项目或组件库，需要统一选择器权重标准以维持代码可维护性时。
- 评估第三方 UI 框架样式与本地样式冲突的风险并寻找覆盖方案时。

## 工作原理

- 在输入框中粘贴一个或多个需要分析的 CSS 选择器，每行一个。
- 工具自动解析选择器语法，识别其中的 ID、类、属性、伪类、元素及伪元素。
- 根据 W3C 标准计算每个选择器的 (a, b, c) 特异性三元组分数。
- 生成可视化对比报告，标注优先级高低并针对高权重选择器给出减少冲突的建议。

## 使用案例

- 解决 UI 框架样式无法被自定义 CSS 覆盖的优先级冲突问题。
- 在 BEM 或 CSS Modules 命名规范中验证选择器是否保持了预期的低特异性。
- 作为前端教学工具，帮助初学者理解 CSS 级联（Cascade）与权重计算的底层逻辑。

## 常见问题

### 什么是 CSS 特异性 (a, b, c)？

它代表权重的三个等级：a 是 ID 选择器数量，b 是类、属性和伪类数量，c 是元素和伪元素数量。

### !important 会被计算在内吗？

!important 不属于特异性计算范畴，但它会覆盖所有普通特异性规则，工具会将其作为特殊标记提醒。

### :is() 和 :where() 伪类如何计算权重？

:is() 的权重取其参数中最重的一个，而 :where() 的权重始终为 0，常用于降低特异性。

### 为什么我的样式被覆盖了，即使特异性分数相同？

在特异性相同的情况下，CSS 遵循“就近原则”，即在样式表中后定义的规则会覆盖先定义的规则。

### 如何有效降低选择器的特异性？

建议尽量减少 ID 选择器的使用，多利用类名组合，并避免过深的嵌套结构。

## 相关工具

- [Tailwind 色板同步器](https://elysiatools.com/zh/tools/tailwind-color-palette-sync): 输入一组 HEX,选择命名规则(色阶 50–950 / 单名 / 对象嵌套),自动生成 tailwind.config.ts 的 theme.extend.colors 片段,每个色阶同时给出 WCAG AA/AAA 对比等级,可选暗色模式。
- [定时任务模拟器](https://elysiatools.com/zh/tools/cron-job-simulator): 模拟一个或两个 5 段式 Cron 表达式的未来执行时间，标出重叠点并提示过密调度。
- [HTTP 状态码全集参考](https://elysiatools.com/zh/tools/http-status-reference): 完整的 HTTP 状态码参考（1xx–5xx），包含语义、典型场景与重试建议的对比表
- [响应式断点可视 Diff](https://elysiatools.com/zh/tools/responsive-breakpoint-diff): 以多个视口宽度渲染 URL，并在页面内直观查看截图、像素差异热力图和布局指标。
- [CSS 瀑布流布局生成器](https://elysiatools.com/zh/tools/css-masonry-layout-generator): 生成纯 CSS 的瀑布流布局代码，支持响应式断点、间距设置和可跳过元素
- [OpenAPI 变更破坏检测器](https://elysiatools.com/zh/tools/openapi-diff-breach-detector): 对比 OpenAPI 或 GraphQL schema，标记 breaking changes，并生成面向 API 团队的影响报告
- [信用卡返现计算器](https://elysiatools.com/zh/tools/cash-back-calculator): 信用卡返现计算器：输入各消费类别（名称、月消费额、返现率），计算月度与年度返现额、有效返现率，并与平价卡对比哪个更划算，展示各类别返现占比图。
- [信用卡还款规划器](https://elysiatools.com/zh/tools/credit-card-payoff): 信用卡还款规划器：输入多张信用卡（名称、余额、APR、最低还款比例），对比雪崩法（高利率优先）与雪球法（低余额优先）的还款时间、总利息与节省额，展示余额递减曲线对比。

## 示例

- [CSS选择器示例](https://elysiatools.com/zh/samples/css-selectors): 用于提取和分析测试的CSS选择器示例集合
- [Bulma CSS 框架示例](https://elysiatools.com/zh/samples/bulma): Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式
- [CSS 查看器样本](https://elysiatools.com/zh/samples/css-viewer-samples): 用于浏览器内 CSS 查看器的样本文件
- [Milligram CSS 框架示例](https://elysiatools.com/zh/samples/milligram): Milligram CSS框架示例，包括排版、表单、网格和组件

## 相关内容

- [CSS 编写、布局与层叠工作流](https://elysiatools.com/zh/hubs/css-authoring-layout-and-cascade-workflows): 通过可读格式化、选择器诊断、响应式片段和视觉状态检查来编写与审查 CSS。