Elysia Tools
导航
Development
计算 CSS 选择器特异性分数，比较多个选择器优先级，并给出避免冲突的建议
详情
输入一个或多个 CSS 选择器后，工具会分解并计算 (a, b, c) 特异性，展示优先级强弱，并针对高特异性选择器给出减少冲突的建议。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
CSS 选择器特异性计算器是一个专业的开发者工具，旨在帮助前端工程师精确计算 CSS 选择器的权重（ID、类/伪类、元素/伪元素）。通过分解选择器结构并生成 (a, b, c) 分数，该工具能直观展示多个选择器之间的优先级强弱，并提供优化建议以减少样式冲突，确保 CSS 级联逻辑清晰可控。
背景
正在修改网站导航栏，发现新写的 .nav .item.active 样式无法覆盖旧有的 #header .nav-link。
问题
需要确认两个选择器的具体权重差异以寻找覆盖方案。
如何使用
将两个选择器输入工具进行对比分析。
.nav .item.active
#header .nav-link结果
工具显示 #header .nav-link 权重为 (1, 0, 1)，而 .nav .item.active 仅为 (0, 2, 1)，明确了 ID 选择器是导致无法覆盖的原因。
背景
团队开发的组件库中使用了复杂的嵌套选择器，导致用户在外部难以通过简单的类名覆盖样式。
问题
识别并简化高权重选择器以提高组件的可定制性。
如何使用
批量输入组件库中的核心选择器进行权重审计。
button.btn-primary:hover:not(.disabled)结果
识别出该选择器权重为 (0, 3, 1)，建议通过使用 :where() 伪类包裹部分选择器来降低权重。
它代表权重的三个等级：a 是 ID 选择器数量，b 是类、属性和伪类数量，c 是元素和伪元素数量。
!important 不属于特异性计算范畴，但它会覆盖所有普通特异性规则，工具会将其作为特殊标记提醒。
:is() 的权重取其参数中最重的一个，而 :where() 的权重始终为 0，常用于降低特异性。
在特异性相同的情况下，CSS 遵循“就近原则”，即在样式表中后定义的规则会覆盖先定义的规则。
建议尽量减少 ID 选择器的使用，多利用类名组合，并避免过深的嵌套结构。